HTML5 元素属性介绍

HTMLElement 表示所有的 HTML 元素。

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

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

菜单

1. 获取HTMLElement元素方式

2. 非事件属性

3. 事件属性

4. 扩展阅读

1. 获取HTMLElement元素方式

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

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

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

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

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

2. 非事件属性

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

属性名称	属性类型	说明
element.attributes 只读	NamedNodeMap	获取此元素的所有属性集合对象
HTMLElement.contentEditable	"true"、"false" or "inherit"(默认)	获取或设置元素的可编辑状态
element.children 只读	HTMLCollection	获取一个包含该元素下子元素的数组
element.classList 只读	DOMTokenList	获取一个包含该元素class的数组。
element.className	DOMString	设置或获取元素的class属性 eg：<button class="a b"></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	获取元素完整的像素高度；包含了边框、内边距、内容区域以及滚动条等范围
HTMLElement.offsetLeft 只读	double	获取当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界 偏移的像素值。
HTMLElement.offsetParent 只读	Element	获取元素的父元素
HTMLElement.offsetTop 只读	double	获取元素与其 offsetParent 元素的顶部距离
HTMLElement.offsetWidth 只读	double	获取元素完整的像素宽度；包含了边框、内边距、内容区域以及滚动条等范围
HTMLElement.style	CSSStyleDeclaration	设置或获取元素的样式对象
element.scrollHeight 只读	double	与clientheight类似。还包含了不可见的内容区域。 若获取的值比clientHeight小，将返回 clientHeight。
element.scrollLeft	double	设置或获取元素水平滚动条到最左边的距离
element.scrollTop	double	设置或获取元素垂直滚动条到顶部的距离
element.scrollWidth 只读	double	与clientWidth类似。还包含了不可见的内容区域。 若获取的值比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 的差别可查看此链接 events-mouseevent-event-order

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：http://www.akmsg.com/WebDemo/HTML5-HTMLElementAttr.html

End

Web开发之路系列文章

菜单加载中...