HTMLElement 表示所有的 HTML 元素。

这里将以事件属性和非事件属性的分类进行介绍。

事件属性大多继承自GlobalEventHandlers，非事件属性大多继承自Element。

菜单

1.

2.

3.

4.

 

1. 获取HTMLElement元素方式

通过DOM，有以下4种方式直接获取HTMLElement对象：

(elementID) ：获取指定ID的第一个元素。

(className) ：获取一个class属性含有指定值的元素数组 。

(nameValue) ：获取一个name属性为指定值的元素数组。

(elementName)等方式来获取指定元素 ：获取一个指定元素名称的元素数组。

 

2. 非事件属性

说明：包含从Element继承的以及自身独有的属性

属性名称 属性类型 说明

element.attributes 只读 NamedNodeMap 获取此元素的所有属性集合对象

HTMLElement.contentEditable

"true"、"false" or

"inherit"(默认)

获取或设置元素的可编辑状态

element.children 只读 HTMLCollection 获取一个包含该元素下子元素的数组

element.classList 只读

获取一个包含该元素class的数组。

element.className DOMString

设置或获取元素的class属性

eg：<button></buttom> =>  'a b'

element.clientHeight 只读 double 获取元素内部的像素高度；包含内边距，但不包括水平滚动条、边框和外边距。

element.clientLeft 只读 double 获取元素的左边框的像素宽度。不包括左外边距和左内边距。

element.clientTop 只读 double 获取元素的顶部边框的像素宽度。不包括顶部外边距或顶部内边距

element.clientWidth 只读 double 获取元素的内部像素宽度。包括内边距，但不包括垂直滚动条、边框和外边距。

HTMLElement.dataset 只读 DOMStringMap 获取一个包含此元素的所有以 data- 开头的自定义数据属性的数组。

HTMLElement.dir  DOMString 设置或获取元素的内容书写方向

HTMLElement.draggable Boolean 设置或获取元素是否可拖动

HTMLElement.hidden Boolean 设置或获取元素是否隐藏

HTMLElement.id DOMString 设置或获取元素的id

HTMLElement.isContentEditable 只读 Boolean 获取元素的内容是否可编辑状态

element.innerHTML DOMString 以HTML代码格式设置获取元素内的内容。

element.innerText DOMString 设置或获取元素内的文本内容。

element.namespaceURI 只读 DOMString 获取元素的命名空间。

HTMLElement.offsetHeight 只读 double 获取元素的像素高度；高度包含了内边距、边框、滚动条及css高度等范围

HTMLElement.offsetLeft 只读 double

获取当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界

偏移的像素值。

HTMLElement.offsetParent 只读 Element 获取元素的父元素

HTMLElement.offsetTop 只读 double 获取元素与其 offsetParent 元素的顶部距离

HTMLElement.offsetWidth 只读 double 获取元素的像素宽度；包含了内边距、边框、滚动条及内容宽度等范围

HTMLElement.style CSSStyleDeclaration 设置或获取元素的样式对象

element.scrollHeight 只读 double

获取元素的内容区域全部高度。包括边距、整体内容，不包括水平滚动条。

若获取的值比clientHeight小，将返回 clientHeight。

element.scrollLeft double 设置或获取元素水平滚动条到最左边的距离

element.scrollTop double 设置或获取元素垂直滚动条到顶部的距离

element.scrollWidth 只读 double

获取元素的内容区域全部宽度。包括边距、整体内容，不包括垂直滚动条。

若获取的值比clientWidth小，将返回 clientWidth。

HTMLElement.tabIndex long 设置或获取元素的tab顺序

element.tagName 只读 DOMString 获取元素的元素名称，以大写格式返回。eg：<div></div> // =>DIV

HTMLElement.title DOMString 设置或获取元素的title

 

3. 事件属性 3.1 继承自GlobalEventHandlers的事件属性

属性名称 事件说明

onabort 中断事件；如img的中断下载。

onblur 当元素失去焦点时触发

onerror 错误发生时触发；如Js运行错误。在window可注册一个全局的error事件处理函数用于收集错误报告。

onfocus 当元素获取焦点时触发

onchange 当元素内容发生变更并失去焦点时触发

onclick 点击元素时触发

oncontextmenu 在元素范围内右键显示菜单时触发

ondblclick 双击元素时触发

ondrag 拖动元素时触发

ondragend 元素拖动结束时触发

ondragenter 当其他元素拖动到该元素范围内时触发

ondragexit 该元素被拖动到某一拖动区域，并在拖动区域内释放鼠标时，该元素将触发此事件

ondragleave 当其他元素拖动到该元素范围内后再拖动出去时触发

ondragover 当其他元素在该元素范围内进行拖动时触发

ondragstart 元素开始拖动时触发

onDrop 其他元素拖到该元素范围内并释放时触发

oninput 当<input>、<textarea>等元素value属性的值由输入设备改变时，就会触发input事件

onkeydown 当元素获取焦点并且按下键盘按键时会触发

onkeypress 当元素获取焦点并且完成一次键盘按键的按下和弹起时会触发

onkeyup 当元素获取焦点并且键盘按键弹起时会触发

onload 元素加载完成后触发

onmousedown 在元素范围内按下鼠标按键时会触发

onmouseenter 在鼠标进入元素范围内时会触发

onmouseleave 在鼠标离开元素范围时会触发

onmousemove 鼠标在元素范围内移动时会触发

onmouseout 在鼠标离开元素范围时会触发，推荐使用 onmouseleave

onmouseover 鼠标在元素范围内移动时会触发，推荐使用 onmousemove

onmouseup 在元素范围内弹起鼠标按键时会触发

onmousewheel 鼠标在元素范围内使用滚时会触发

onscroll 元素进行滚动时触发；包括水平、垂直滚动

注意： mouseover/mouseout 与  mouseenter/mouseleave 的差别可查看此链接

 

3.2 自身的事件属性

属性名称 事件说明

onTouchStart 在元素范围内开始触摸

onTouchEnd 在元素上结束触摸

onTouchMove  在元素范围内触摸移动

onTouchEnter  触摸点进入元素范围内

onTouchLeave  触摸点离开元素范围

onTouchCancel 在元素范围内触摸结束

 

4. 扩展阅读

HTMLElement：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

Element：https://developer.mozilla.org/zh-CN/docs/Web/API/Element

GlobalEventHandlers：https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers

部分在线Demo：

 

==================================系列文章==========================================

本篇文章：6.8 HTML5 元素属性介绍

Web开发之路系列文章