HTML5 元素属性介绍

2017-03-27 53
摘要: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 获取元素的像素高度;高度包含了内边距、边框、滚动条及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 的差别可查看此链接 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

 

TOP