JavaScript HTML DOM节点类型之Element类型（Element对象）

在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文档事件。