HTML DOM Element 对象

Element 对象

在 HTML DOM 中，Element 对象代表 HTML 元素，如 P、DIV、A、TABLE 或任何其他 HTML 元素。

属性和方法

以下属性和方法可用于所有 HTML 元素：

属性 / 方法 描述
accessKey 设置或返回元素的 accesskey 属性。
addEventListener() 将事件处理程序附加到元素。
appendChild() 向元素添加（附加）新的子节点。
attributes 返回元素属性的 NamedNodeMap。
blur() 从元素中移除焦点。
childElementCount 返回元素的子元素个数。
childNodes 返回元素子节点的 NodeList。
children 返回元素的子元素的 HTMLCollection。
classList 返回元素的类名。
className 设置或返回元素的 class 属性值。
click() 模拟鼠标单击元素。
clientHeight 返回元素的高度，包括内边距。
clientLeft 返回元素左边框的宽度。
clientTop 返回元素上边框的宽度。
clientWidth 返回元素的宽度，包括内边距。
cloneNode() 克隆元素。
closest() 在 DOM 树中搜索与 CSS 选择器匹配的最接近的元素。
compareDocumentPosition() 比较两个元素的文档位置。
contains() 如果节点是节点的后代，则返回 true。
contentEditable 设置或返回元素的内容是否可编辑。
dir 设置或返回元素的 dir 属性的值。
firstChild 返回元素的第一个子节点。
firstElementChild 返回元素的第一个子元素。
focus() 让元素获得焦点。
getAttribute() 返回元素属性的值。
getAttributeNode() 返回属性节点。
getBoundingClientRect() 返回元素的大小及其相对于视口的位置。
getElementsByClassName() 返回拥有给定类名的子元素的集合。
getElementsByTagName() 返回拥有给定标签名称的子元素的集合。
hasAttribute() 如果元素拥有给定属性，则返回 true。
hasAttributes() 如果元素拥有任何属性，则返回 true。
hasChildNodes() 如果元素有任何子节点，则返回 true。
element.id 设置或返回元素 id 属性的值。
innerHTML 设置或返回元素的内容。
innerText 设置或返回节点及其后代的文本内容。
insertAdjacentElement() 在相对于元素的位置插入新的 HTML 元素。
insertAdjacentHTML() 在相对于元素的位置插入 HTML 格式的文本。
insertAdjacentText() 在相对于元素的位置插入文本。
insertBefore() 在现有子节点之前插入新子节点。
isContentEditable 如果元素的内容是可编辑的，则返回 true。
isDefaultNamespace() 如果给定的 namespaceURI 是默认值，则返回 true。
isEqualNode() 检查两个元素是否相等。
isSameNode() 检查两个元素是否是同一个节点。
isSupported() 已弃用。
lang 设置或返回元素的 lang 属性值。
lastChild 返回元素的最后一个子节点。
lastElementChild 返回元素的最后一个子元素。
matches() 如果元素与给定的 CSS 选择器匹配，则返回 true。
namespaceURI 返回元素的命名空间 URI。
nextSibling 返回位于相同节点树层级的下一个节点。
nextElementSibling 返回位于相同节点树层级的下一个元素。
nodeName 返回节点的名称。
nodeType 返回节点的节点类型。
nodeValue 设置或返回节点的值。
normalize() 合并元素中相邻的文本节点，并移除空的文本节点。
offsetHeight 返回元素的高度，包括内边距、边框和滚动条。
offsetWidth 返回元素的宽度，包括内边距、边框和滚动条。
offsetLeft 返回元素的水平偏移位置。
offsetParent 返回元素的偏移容器。
offsetTop 返回元素的垂直偏移位置。
outerHTML 设置或返回元素的内容（包括开始标签和结束标签）。
outerText 设置或返回节点及其后代的外部文本内容。
ownerDocument 返回元素的根元素（文档对象）。
parentNode 返回元素的父节点。
parentElement 返回元素的父元素节点。
previousSibling 返回位于相同节点树层级的上一个节点。
previousElementSibling 返回位于相同节点树层级的上一个元素。
querySelector() 返回与 CSS 选择器匹配的第一个子元素。
querySelectorAll() 返回与 CSS 选择器匹配的所有子元素。
remove() 从 DOM 中移除元素。
removeAttribute() 从元素中移除属性。
removeAttributeNode() 移除属性节点，并返回移除的节点。
removeChild() 从元素中移除子节点。
removeEventListener() 删除已使用 addEventListener() 方法附加的事件处理程序。
replaceChild() 替换元素中的子节点。
scrollHeight 返回元素的整体高度，包括内边距。
scrollIntoView() 将元素滚动到浏览器窗口的可见区域。
scrollLeft 设置或返回元素内容水平滚动的像素数。
scrollTop 设置或返回元素内容垂直滚动的像素数。
scrollWidth 返回元素的整体宽度，包括内边距。
setAttribute() 设置或更改属性的值。
setAttributeNode() 设置或更改属性节点。
style 设置或返回元素 style 属性的值。
tabIndex 设置或返回元素的 tabindex 属性的值。
tagName 返回元素的标签名。
textContent 设置或返回节点及其后代的文本内容。
title 设置或返回元素的 title 属性值。
toString() 将元素转换为字符串。

Element 接口详解

Element 接口表示 HTML 元素、XML元素或标记。tagName 属性指定了元素的名称。Document 的 documentElement 属性引用这个文档的根 Element 对象。HTMLDocument 对象的 body 属性也类似，它引用了文档的 <body> 元素。要在一个 HTML 文档中找到指定名称的元素，使用 Document.getElementById()（并通过 id 属性给该元素一个唯一的名称）。要通过标记名来定位元素，使用 getElementsByTagName()，这既是 Element 的方法也是 Document 的方法。在 HTML 文档中，也可以使用类似的 HTMLDocument.getElementsByName() 方法来根据元素的 name 属性来查找元素。最后，可以用 Document.createElement() 方法，创建插入文档的新 Element 元素。

addEventListener() 方法（及其特定于 IE 的替代方法 attachEvent() ）提供了在该元素上为特定类型的事件注册事件句柄函数的方法。从技术上讲，addEventListener() 、removeEventListener() 和 dispatchEvent() 都是由2级 DOM Events 规范的 EventTarget 接口定义的。所有的 Element 对象都实现了 EventTarget。

这个接口的各种其他方法提供了对元素的属性的访问。在 HTML 文档中（以及许多 XML 文档中），所有属性都有简单的字符串值，并且你可以使用简单方法 getAttribute() 和 setAttribute() 进行所需的任何属性操作。

如果你在使用 XML 文档，它可能包含了 Entity 参考页作为属性值的一部分，你将必须使用 Attr 对象及其节点的子树。你可针对一个属性使用 getAttributeNode() 和 setAttributeNode() 来获取和设置 Attr 对象，或者可以在 Node 接口的 attributes[] 数组遍历 Attr 节点。如果您使用了一个用到 XML 名字空间的 XML 文档，需要使用名字带有 "NS" 的各种方法。

在 1 级 DOM 规范中， normalize() 方法是 Element 接口的一部分。在 2 级规范中，normalize() 则是 Node 接口的一部分。所有 Element 节点继承这个方法并且仍然可以使用它。

知识点：HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点（参见下一节）。