基础篇：Element 对象

Element 是 DOM 里所有元素节点的基接口，描述各类元素共有的属性和方法。Document 并不继承 Element；文档节点走的是 Document 接口。

更具体的行为由子接口补充：HTMLElement 是 HTML 元素的基接口，SVGElement 是 SVG 元素的基接口。Firefox 历史上的 XUL 通过 XULElement 也实现过 Element，现行 Web 开发已不再使用。

Element 属性

Element 继承了 Node 接口所有属性，并且扩展了 Node 的父接口 EventTarget，并且从以下接口继承了部分属性：ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable。

id

返回元素的 id 属性。

同一文档中，若 id 的值不是空字符串 ""，便必须是唯一的；也就是说，不能有 id 属性值相同的元素。

className

获取或设置指定元素的 class 属性的值，其返回值是一个字符串，可以由空格分隔的多个 class 属性值。

classList（只读）

返回一个元素的 class 属性的实时 DOMTokenList 集合。

attributes（只读）

返回元素所有属性节点的一个实时集合。该集合是一个 NamedNodeMap 对象，是一个类数组（不是一个数组），所以它没有数组的方法，其包含的属性节点的索引顺序随浏览器不同而不同。

clientHeight（只读）

返回元素内部高度（单位：像素）。

元素内部的高度包含内边距，但不包括水平滚动条、边框和外边距。对于没有定义 CSS 或者内联布局盒子的元素为 0。

clientHeight = height + padding - 水平滚动条高度（如果存在）。

备注： 此属性会将获取的值四舍五入取整数。 如果需要小数结果，可使用 getBoundingClientRect() 方法。

备注： getBoundingClientRect() 返回的 height 含边框，与 clientHeight（不含边框）不同。

clientWidth（只读）

与 clientHeight 类似，返回的是元素内部宽度（单位：像素）。

元素内部的宽度包含内边距，但不包括垂直滚动条、边框和外边距。

当在根元素使用 (或者 quirks（怪异）模式下的在 body 元素），返回 viewport 的宽度（不包括任何滚动条）。

clientLeft（只读）

返回元素的左边框的宽度（单位：像素），不包括左外边距和左内边距。

如果元素的文本方向是从右向左（RTL，right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。

clientTop（只读）

返回元素的上边框的宽度（单位：像素），不包括顶部外边距或内边距。

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

innerHTML

设置或获取 HTML 语法表示的元素的后代。

outerHTML

设置或获取描述元素（包括其后代）的序列化 HTML 片段。在设置时，会从给定的字符串开始解析，替换元素自身。

localName（只读）

返回一个字符串，表示这个元素名称本地化的部分。

namespaceURI（只读）

返回元素的命名空间，若该元素不在命名空间中则返回 null。

nextElementSibling（只读）

返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 null。

previousElementSibling（只读）

返回当前元素在其父元素的子元素节点中的前一个元素节点，如果该元素已经是第一个元素节点，则返回 null。

prefix（只读）

返回指定元素的命名空间前缀，如果未指定前缀，则返回 null。

scrollHeight（只读）

返回一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

没有垂直滚动条的情况下， scrollHeight 与 clientHeight 相同：包含元素的内边距，但不包括边框、外边距或水平滚动条（如果存在），还包括伪元素的高度，例如 ::before 或 ::after。

scrollWidth（只读）

返回一个元素内容宽度的度量，包括由于溢出导致的视图中不可见内容。

没有水平滚动条的情况下， scrollWidth 与 clientWidth 相同：包含元素的内边距，但不包括边框、外边距或垂直滚动条（如果存在），还包括伪元素的宽度，例如 ::before 或 ::after。

scrollLeft

获取或设置一个元素的内容水平滚动的距离，即元素的内容左侧（卷起来的）到它的视口可见内容（的左侧）的距离（单位：像素）。

该值可以是任意整数，然而：

• 如果元素不能滚动（如没有溢出，或 overflow 不可滚动），那么返回 0。
• 如果给 scrollLeft 设置的值小于 0，那么值将变为 0（LTR 布局）。
• 如果给 scrollLeft 设置的值超出容器可滚动的值，则会被设为最大值。

注意： 如果元素的内容排列方向是从右向左（rtl），滚动条会位于最右侧（内容开始处），并且 scrollLeft 值为 0。此时从右到左拖动滚动条，scrollLeft 会从 0 变为负数。

scrollTop

获取或设置一个元素的内容垂直滚动的距离，即元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离（单位：像素）。

该值可以是任意整数，然而：

• 如果元素不能滚动（如没有溢出，或 overflow 不可滚动），那么返回 0。
• 如果给 scrollTop 设置的值小于 0，那么值将变为 0。
• 如果给 scrollTop 设置的值超出容器可滚动的值，则会被设为最大值。

tagName

返回当前元素的标签名。

备注： 在 XML（或者其他基于 XML 的语言，比如 XHTML、xul）文档中，tagName 的值会保留原始的大小写。而在 HTML 文档中，tagName 会返回其大写形式。

备注： 对于元素节点来说，tagName 属性的值和 nodeName 属性的值是相同的。

assignedSlot（只读）

返回一个 HTMLSlotElement，表示 slot 插入节点的元素。

<my-paragraph>
    <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

const slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.assignedSlot)

onfullscreenchange

fullscreenchange 事件的回调方法，在元素进入或退出全屏模式时触发。不仅可用于观察（监听）可预期的过度变化，还可以观察（监听）未知的变化，如：当你的应用程序在后台运行。

onfullscreenerror

fullscreenerror 事件的回调方法，在进入全屏模式过程中出现错误时触发。

Element 方法

从父接口 Node 和 Node 的父接口 EventTarget 继承方法，并继承了 ParentNode、ChildNode、NonDocumentTypeChildNode、Animatable 的部分方法。

getElementsByClassName()

返回一个包含所有指定类名的子元素的动态 HTML 集合 HTMLCollection。

动态 HTML 集合 HTMLCollection，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用该方法。

当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点；在任意元素上调用该方法，会搜索以当前元素为根节点的 DOM 树。

getElementsByTagName()

返回一个包括所有指定标签名的子元素的动态 HTML 集合 HTMLCollection。

动态 HTML 集合 HTMLCollection，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用该方法。

当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点；在任意元素上调用该方法，会搜索以当前元素为根节点的 DOM 树。

getElementsByTagNameNS()

与 getElementsByTagName() 类似，但返回的是带有指定标签名和命名空间的元素集合。

querySelector()

返回与指定的选择器组匹配的、当前元素后代中的第一个元素（不包括元素自身）。找不到则返回 null。

querySelectorAll()

返回一个非实时更新的 NodeList，它包含所有元素的非活动节点，该元素来自与其匹配指定的 CSS 选择器组的元素（指定元素本身不包括，即使它匹配）。

closest()

获取匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。

matches()

返回一个布尔值，表示元素是否包含指定的选择器。

insertAdjacentElement()

将指定的元素插入到相对于被调用的元素的给定的一个位置。

element.insertAdjacentElement(position, element);

position 值必须是以下字符串之一：

• beforebegin：在该元素本身的前面。
• afterbegin：只在该元素当中，在该元素第一个子孩子前面。
• beforeend：只在该元素当中，在该元素最后一个子孩子后面。
• afterend：在该元素本身的后面。

insertAdjacentHTML()

将指定的文本解析为 Element 元素，并将元素插入到相对于被调用的元素的给定的一个位置。

element.insertAdjacentHTML(position, text);

它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。

insertAdjacentText()

将一个给定的文本节点插入到相对于被调用的元素的给定的一个位置。

element.insertAdjacentText(position, text);

remove()

从 DOM 中删除指定元素。

addEventListener()

将指定的监听器注册到事件目标上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document、Window，或者任何其他支持事件的对象（比如 XMLHttpRequest）。

其工作原理是将实现事件监听的函数或对象添加到调用它的事件目标上的指定事件类型的事件侦听器列表中。

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

removeEventListener()

删除事件目标的监听事件。使用事件类型，事件侦听器函数本身，以及可能影响匹配过程的各种可选择的选项的组合来标识要删除的事件侦听器。

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

dispatchEvent()

向一个指定的事件目标派发一个事件，并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则（包括事件捕获和可选的冒泡过程），同样适用于通过手动的使用 dispatchEvent() 方法派发的事件。

注意： 与浏览器原生事件不同，原生事件是由 DOM 派发的，并通过事件循环机制，异步调用事件处理程序，而dispatchEvent() 则是同步调用事件处理程序。在调用 dispatchEvent() 后，所有监听该事件的事件处理程序将在代码继续前执行并返回。

getBoundingClientRect()

返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

该对象包含描述整个元素的位置和大小的只读属性—— left、top、right、bottom、x、y、width 和 height，单位为像素。除了 width 和 height 以外的属性，是相对于视图窗口的左上角来计算的。

getClientRects()

返回一个是 ClientRect 对象集合，其提供元素相关的 CSS 边框。

该对象包含一组描述该边框的只读属性——left、top、right 和 bottom，单位为像素，这些属性值是相对于视口的左上角。即使当表格的标题在表格的边框外面，该标题仍会被计算在内。

注意： 当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，返回的矩形不包括任何可能超出元素范围的子元素的边界。

hasAttribute()

返回一个布尔值，指示该元素是否包含有指定名称的属性。

hasAttributeNS()

返回一个布尔值，指示该元素是否包含有指定命名空间和名称的属性。

hasAttributes()

返回一个布尔值，表明当前元素节点是否有至少一个的属性。

getAttribute()

返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）。

当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，getAttribute() 会先将其参数转换为小写形式。

注意： 当指定的属性不存在时，现行 DOM 规范要求返回 null。现行浏览器均返回 null。旧 DOM 3 曾规定返回空字符串，Firefox 的 XUL 环境曾如此实现。

getAttributeNS()

返回具有指定命名空间和名称的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）。

getAttributeNames()

返回一个数组，包含指定元素的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。

setAttribute()

设置指定元素上的指定名称的属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

属性的值/新值为任何非字符串的值，都会被自动转换为字符串。

当在 HTML 文档中的 HTML 元素上调用 setAttribute() 方法时，该方法会将其属性名称参数小写化。

setAttributeNS()

与 setAttribute() 类似，设置指定元素上的指定命名空间和名称的属性值。

removeAttribute()

从指定的元素中删除一个给定名称的属性。

removeAttributeNS()

从指定的元素中删除一个给命名空间和名称的属性。

toggleAttribute()

切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。

scroll()

使指定元素滚动到某个特定坐标。

scrollTo()

使指定元素滚动到指定坐标位置。

scrollBy()

使指定元素滚动一段特定距离的。

scrollIntoView()

使指定元素滚动到对用户可见。

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop);
element.scrollIntoView(scrollIntoViewOptions);

参数说明：

• alignToTop（可选）： 布尔值，默认为 true。为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，等同于 scrollIntoViewOptions: {block: "start", inline: "nearest"}；为 false，元素的底端将和其所在滚动区的可视区域的底端对齐，等同于 scrollIntoViewOptions: {block: "end", inline: "nearest"}。
• scrollIntoViewOptions（可选）：
  • behavior（可选）：定义动画过渡效果，默认为 "auto"。可选值：auto | smooth。
  • block（可选）：定义垂直方向的对齐，默认为 "start"。可选值：start | center | end | nearest。
  • inline（可选）：定义水平方向的对齐， 默认为 "nearest"。可选值：start | center | end | nearest。

requestFullscreen()

用于发出异步请求使元素进入全屏模式。

const promise = element.requestFullscreen(options);

options 是可选参数，控制转换到全屏模式的行为的对象。

可用的选项有：

• navigationUI（可选）： 控制当元素处于全屏模式时是否显示导航 UI。
  • “hide”：浏览器的导航界面将被隐藏，屏幕的整个尺寸将分配给元素的显示。
  • ”show“：浏览器将呈现页面导航控件和可能的其他用户界面；元素的尺寸（以及屏幕的感知大小）将被限制，以便为该用户界面留出空间。
  • “auto”（默认值）：由浏览器来决定是否显示导航条。

该方法不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的 Promise 会 resolve，并且该元素会收到一个 fullscreenchange 事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个 fullscreenerror 事件。

备注： 早期的实现总是会把这些事件发送给 Document，而不是调用的元素。

注意： 该方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。

attachShadow()

给指定的元素挂载一个 ShadowDOM，并且返回对 ShadowRoot 的引用。

注意： 并不是每一种元素都能挂载 Shadow Root。HTML 规范只允许部分内置元素以及自定义元素（有效的自定义元素名）作为宿主。<a> 等元素不能作为宿主。

可以挂载 Shadow Root 的常见元素：

任何带有有效名称且可独立存在的自定义元素
article、aside、blockquote、body、div、footer
h1～h6、header、main、nav、p、section、span

createShadowRoot()

用于创建 ShadowDOM 实例，并附加到现有元素。创建 shadowDOM 之后，它所附加的元素称为 shadow root。

备注： 已废弃。应使用 attachShadow()。

setCapture()

将鼠标事件重新定向到指定元素，直到鼠标按钮被释放或者 releaseCapture() 被调用。

Firefox 非标准 API，已过时。现行代码应使用 setPointerCapture()。

element.setCapture(retargetToElement);

retargetToElement 设置为 true，所有事件被直接定向到这个元素；如果是 false，事件也可以在该元素的子元素上触发。

setPointerCapture()

用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放（通过 releasePointerCapture()）。

hasPointerCapture()

返回一个布尔值，表示当前元素是否具有由给定指针 ID 标识的指针的指针捕获。

releasePointerCapture()

释放（停止）先前为特定指针设置的指针捕获。

animate()

创建一个新的 Animation，将它应用于元素，然后运行动画。返回新建的 Animation 实例。

getAnimations()

返回影响此元素的 Animation 对象数组，也可选择是否包含后代元素上的动画。

computedStyleMap()

返回 StylePropertyMapReadOnly，用于以 Typed OM 方式只读访问该元素的计算样式。浏览器支持尚未完全普及。

requestPointerLock()

异步请求将鼠标指针锁定在指定元素上。

异步地请求将鼠标指针锁定在指定元素上。

若想追踪请求成功还是失败，则需要在 Document 级别监听 pointerlockchange 和 pointerlockerror 事件。

Element 事件

使用 addEventListener() 或将事件监听器分配给该接口的 oneventname 属性来监听事件。

cancel

当用户指示浏览器关闭当前打开的对话框时触发。如，当用户按下 Esc 键或单击 “关闭对话框” 按钮时，浏览器可能会触发此事件。

error

当资源加载失败或无法使用时触发。如，脚本执行错误或图像无法找到或无效。

scroll

滚动文档视图或元素时触发。

select

选择某些文本时会触发事件。

备注： 该事件不适用于所有语言的所有元素。例如，在 HTML，只能在表单 input、textarea 元素上触发。

wheel

当用户转动指向设备（通常是鼠标）上的滚轮按钮时触发。

copy

当用户通过浏览器 UI（如使用 Ctrl、⌘ + C 快捷键或从菜单中选择「复制」）发起复制操作时触发。脚本调用 Clipboard API（或旧的 document.execCommand('copy')）且被允许时也会触发。

cut

在将选中内容从文档中删除并将其添加到剪贴板后触发。

如果用户尝试对不可编辑内容执行剪切操作，则 cut 事件仍会触发，但事件对象不包含任何数据。

paste

当用户在浏览器用户界面发起“粘贴”操作时触发。

如果光标位于可编辑的上下文中（例如，textarea 元素或者 contenteditable 属性为 true 的元素），则默认操作是将剪贴板的内容插入光标所在位置的文档中。

事件处理程序可以通过调用事件的 clipboardData 属性上的 getData() 访问剪贴板内容。如果要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），必须使用 event.preventDefault() 方法取消默认操作，然后手动插入想要的数据。

compositionstart

文本合成系统（如，输入法编辑器）开始新的输入合成时触发。如，当用户使用拼音输入法开始输入汉字。

compositionend

当文本段落的构成完成或取消时触发（具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议）。

compositionupdate

当字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）触发。

focus

当一个元素获取焦点时触发。它和 focusin 事件的主要区别是：focusin 支持冒泡。

blur

当一个元素失去焦点时触发。它和 focusout 事件的主要区别是：focusout 支持冒泡。

focusin

当一个元素获取焦点时触发。

focusout

当一个元素失去焦点时触发。

fullscreenchange

当元素进入到或退出了全屏模式时触发。

fullscreenerror

当元素进入到或退出了全屏模式发生错误时触发。

keydown

当键盘按键按下时触发。

keypress（已弃用）

当按下一个键并且该键通常会产生一个字符值时触发。现行代码应使用 keydown。

keyup

在键盘按键被松开时触发。

keydown 与 keypress 的区别：所有按键均会触发 keydown，无论是否会产生字符值。

keydown 与 keyup 捕获按键操作，keypress 反映输入的字符值。例如小写 a 在 keydown 和 keyup 中常见的是 keyCode 65，在 keypress 中常见的是 97；大写 A 在这些事件中常见的都是 65。现行代码应优先使用 event.key、event.code。

键盘事件可在获得焦点的任意元素上触发，并不限于 input、textarea。window、document 也可监听。contenteditable 或设置了 tabindex 的元素同样可以接收键盘事件。

click

在一个元素上单击（按下和放开）一次鼠标的指针设备按钮（通常是鼠标左键）时触发。

dblclick

在一个元素上连续单击两次鼠标的指针设备按钮（通常是鼠标左键）时触发。

contextmenu

在用户尝试打开上下文菜单时被触发。

该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发，如果使用菜单键，该上下文菜单会被展示到所聚焦元素的左下角，但是如果该元素是一棵 DOM 树的话，上下文菜单便会展示在当前这一行的左下角。

任何没有被禁用的鼠标右击事件（通过调用事件的 preventDefault() 方法）的元素都可以触发该事件。

mousedown

在指针设备按钮按下时触发。

mouseup

在指针设备按钮放开时触发。

mouseenter

当指针设备（通常指鼠标）的指针移动到元素时触发。

类似 mouseover 事件，两者区别是：mouseenter 不会冒泡，而 mouseover 会。也就是说，当指针从该元素移动到其子元素时，不会触发 mouseenter 事件，但会触发 mouseover 事件。

mouseleave

当指针设备（通常是鼠标）的指针移出元素时触发。

类似 mouseout 事件，两者区别是：mouseleave 不会冒泡，而 mouseout 会。也就是说，当指针从该元素移动到其子元素时，不会触发 mouseleave 事件，但会触发 mouseout 事件。

mouseover

当指针设备（通常指鼠标）的指针移动到当前元素或其子元素时触发。当指针从一个元素移入其子元素时也会触发，因为子元素遮盖了父元素的可视区域。

mouseout

当指针设备（通常指鼠标）的指针移出当前元素或其子元素时触发。当指针从一个元素移入其子元素时也会触发，因为子元素遮盖了父元素的可视区域。

mousemove

当指针设备（通常指鼠标）在元素上移动时触发。

touchstart

当一个或多个触摸点与触控设备表面接触时触发。

touchmove

当一个或多个触摸点沿触摸设备表面移动时触发。

touchend

当一个或多个触摸点沿触摸设备表面移除时触发。

touchcancel

当一个或多个触摸点沿触摸设备表面被中断时触发。中断方式基于特定实现而有所不同，例如， 创建了太多的触摸点。

HTMLElement 对象

HTMLElement 接口表示所有 HTML 元素。部分 HTML 元素直接实现 HTMLElement，其余通过更具体的接口间接实现。

HTMLElement 属性

继承父接口 Element 和 GlobalEventHandlers 的属性：

• accessKey：获取/设置元素访问的快捷键。
• accessKeyLabel（只读）：返回包含元素访问快捷键的字符串。
• contentEditable：获取/设置元素的可编辑状态。
• isContentEditable（只读）：表明元素的内容是否可编辑。
• contextMenu（已废弃）：曾用于设置/获取元素的右键菜单，现行浏览器已移除。
• dataset（只读）：获取元素的自定义 data-* 属性，是一个 DOMStringMap。
• dir：获取/设置元素的方向，可选值：ltr、rtl、auto。
• hidden：获取/设置元素是否隐藏。
• lang：获取/设置元素属性、文本、内容的语言。
• offsetHeight（只读）：元素布局高度（含边框，不含外边距）。
• offsetWidth（只读）：元素布局宽度（含边框，不含外边距）。
• offsetLeft（只读）：元素左边框相对于 offsetParent 左边框的偏移。
• offsetTop（只读）：元素上边框相对于 offsetParent 上边框的偏移。
• offsetParent（只读）：最近的定位祖先（或 td、th、table）。display: none 或 position: fixed 等情况下可能为 null。
• style：获取/设置元素的 style 属性（内联样式）。
• tabIndex：获取/设置元素的 tab 键控制次序。
• title：获取/设置元素的 title 属性。

HTMLElement 方法

继承父接口 Element 的方法：

• blur()： 元素失去焦点。
• click()： 触发元素的点击事件。
• focus()： 元素获得焦点。

相关问题

getElementsByClassName 和 querySelectorAll 的区别？

getElementsByClassName 返回一个即时更新（动态的）HTMLCollection，querySelectorAll 返回一个非即时更新（静态的） NodeList。

HTMLCollection 和 NodeList 都是类数组形式。

<div id="parent">
    <p class="p">1</p>
    <p class="p">2</p>
    <p class="p">3</p>
</div>

const parent = document.getElementById('parent')
const list1 = parent.getElementsByClassName('p')
const list2 = parent.querySelectorAll('.p')
console.log(list1.length); // 3
console.log(list2.length); // 3

const newP = document.createElement("p")
newP.classList.add('p');
parent.appendChild(newP);
console.log(list1.length); // 4（即时更新）
console.log(list2.length); // 3（非即时更新）

参考资料

MDN - Element

MDN - HTMLElement