在HTML DOM
中,所有部分都可以认为是节点,Element
对象表示 HTML 元素。Element
是Document的一个子对象,Element
对象接口描述了所有元素所普遍具有的方法和属性, HTML DOM
中所有的元素都继承自Element
对象。
1. Element
对象
HTML DOM
中,Element
对象表示 HTML 元素。Element
对象可以拥有的节点类型有Element
类型、Text
类型、Comment
,Element
对象也可以包含Attr
类型,即:属性类型。HTML DOM
中HTMLElement
接口是所有HTML元素的基础接口。
HTML DOM
中的所有类型都继续自Node类型,Node
类型中的属性和方法在其子类型中都存在,但在Node
中的属性和方法在Element
对象中并不全部适用。
2. Element
对象属性
code>Element对象的属性中,有些是只读属性,如:Element.attributes
、Element.classList
等。有些属性是可读写的,通过这些属性可元素进行修改,如:Element.innerHTML
可以修改元素内容、Element.scrollLeft
可以修改滚动条与左边的位置等。更多Element
对象属性将在后面介绍……
3. Element
对象方法
Element
对象方法有继承自其父对象Node
和Document
,但更多的是Element
对象自身扩展的方法,如:Element.setAttribute()
设置特性、Element.removeAttribute()
移除特性等。更多Element
对象方法将在后面介
Element
对象是Node
子类型之一,它继承了其父类类型Node
所有的属性,如:ParentNode
、ChildNode
等属性。
Element
对象中详细属性如下:
属性 | 描述 |
---|---|
Element.attributes |
只读属性,返回元素的属性的NamedNodeMap 。 |
ParentNode.childElementCount |
返回元素的子节点数量。 |
ParentNode.children |
返回元素下HTMLCollection 集合 |
ParentNode.classList |
只读属性,返回该元素class属性的DOMTokenList 集合。 |
ParentNode.className |
返回该元素class属性的属性名。 |
Element.clientHeight |
只读属性,返回一个Number类型,表示内层元素相对于外层元素的高度。 |
Element.clientLeft |
只读属性,返回一个Number类型,表示该元素相对于左边界的宽度值。 |
Element.clientTop |
只读属性,返回一个Number类型,表示该元素相对于上边界的高度值。 |
Element.clientWidth |
只读属性,返回一个Number类型,表示该元素的内部宽度值。 |
ParentNode.firstElementChild |
返回一个Element 对象,表示父Element 的第一个子节点,当不存在时返回null。 |
Element.id |
返回该元素id属性的属性值。 |
Element.innerHTML |
返回该元素的内容文本。 |
ParentNode.lastElementChild |
返回一个Element 对象,表示父Element 的最后一个子节点,当不存在时返回null。 |
NonDocumentTypeChildNode.nextElementSibling |
返回一个Element 对象,表示Element 对象的下一个兄弟节点,当不存在时返回null。 |
NonDocumentTypeChildNode.previousElementSibling |
返回一个Element 对象,表示Element 对象的上一个兄弟节点,当不存在时返回null。 |
Element.outerHTML |
获取该DOM元素及其后代的HTML文本,当对其进行设置时,它会从给定的字符串开始解析,并替换其自身。 |
Element.scrollHeight |
只读属性,表示该元素可见滚动条的高度。 |
Element.scrollLeft |
只读属性,表示该元素滚动条距左边界的宽度。 |
Element.scrollWidth |
只读属性,表示该元素滚动条的宽度,即:元素的整体宽度。 |
Element.tagName |
只读属性,返回该元素的标签名。 |
和Element
对象属性一样,Element
对象中方法也有继承自其父类型Node
的所有方法,还有Element
对象自身扩展的方法。
属性 | 描述 |
---|---|
EventTarget.addEventListener() |
对元素添加事件监听器,详见JavaScript DOM文档事件 |
Element.dispatchEvent() |
向一个指定的EventTarget 派发一个事件,以适合的顺序触发受影响的EventListeners 。 |
Element.getAttribute() |
返回该元素节点的指定属性值。 |
Element.getAttributeNode() |
返回指定的属性节点。 |
Element.getElementsByClassName() |
返回具有指定className的HTMLCollection 集合。 |
Element.getElementsByTagName() |
返回具有指定标签名的的HTMLCollection 集合。 |
Element.hasAttribute() |
返回一个布尔值,表示是否具有指定特性值。 |
Element.hasAttribute() |
返回一个布尔值,表示是否具有指定特性值。 |
Element.hasChildNodes() |
返回一个布尔值,表示是否具有子元素。 |
Element.insertBefore() |
在元素之前插入新节点。 |
element.isEqualNode() |
检查两个元素是否相等。 |
element.isSameNode() |
检查两个元素是否是相同的节点。 |
element.isSupported() |
返回一个布尔值,表示元素是否支持指定特性。 |
element.querySelector() |
返回该元素的子元素中,第一个匹配选择器参数的子元素。 |
element.querySelectorAll() |
返回一个non-live的NodeList 集合,该集合包含调用querySelectorAll() 方法DOM对象的所有匹配到指定css选择器子元素。 |
ChildNode.remove() |
从父元素中移除指定的子元素。 |
Element.removeChild() |
从父元素中移除子元素。 |
Element.replaceChild() |
替换元素中的子元素。 |
Element.removeAttribute() |
移除当前元素的指定特性。 |
Element.setAttribute() |
设置当前元素的特性值。 |
EventTarget.removeEventListener() |
移除元素的指定事件监听器,详见JavaScript DOM文档事件。 |