Skip to main content

HTML DOM API - 由 HTML 中每个元素功能的和它们依赖的接口组成

HTML DOM API 由定义 HTML 中每个元素功能的接口，以及作为它们依赖的任何支持类型和接口组成。

HTML DOM API 中包含的功能包括：

HTML DOM 概念和用法​

在本文中，我们将重点关注 HTML DOM 中涉及与 HTML 元素交互的部分。其他方面的讨论，例如 拖放，WebSockets，Web 存储等可以在这些 API 的文档中找到。

HTML 文档的结构​

文档对象模型（DOM）是一种描述 document 结构的架构；每个文档都由 Document 接口的一个实例表示。而文档由节点的分层树组成，其中节点是一个基本记录，代表文档中的一个单一对象（如一个元素或文本节点）。

节点可能是严格组织的，提供了一种将其他节点组合在一起的方法，或者提供了一个可以构建层次结构的点；其他节点可能代表文档的可见组件。每个节点都基于 Node 接口，该接口提供获取节点信息的属性以及在 DOM 中创建、删除和组织节点的方法。

节点没有包含实际显示在文档中的内容的任何概念。它们是空容器。Element 接口引入了可以表示视觉内容的节点的基本概念。Element 对象实例表示使用 HTML 或 XML 词汇表（例如 SVG 创建的文档中的单个元素。

例如，考虑一个包含两个元素的文档，其中一个元素还包含了两个元素：

窗口中带有元素的文档的结构

虽然Document接口被定义为DOM规范的一部分，但HTML规范大大增强了它，增加了在网络浏览器中使用DOM的具体信息，以及使用它来具体表示HTML文档。

虽然 Document 接口被定义为 DOM 规范的一部分，但 HTML 规范大大增强了它，增加了在网络浏览器中使用 DOM 的具体信息，以及使用它来专门表示 HTML 文档的信息。

HTML 标准添加到 Document 的内容包括：

HTML 元素接口​

Element 接口已经通过引入 HTMLElement 接口进一步调整以专门表示 HTML 元素，所有的 HTML 元素类都继承自该接口。它扩展了 Element 类以向元素节点添加特定于 HTML 的通用功能。HTMLElement 添加的属性包括例如 hidden 和 innerText。HTMLElement 还添加了所有全局事件处理程序。

HTML 文档是一个 DOM 树，其中每个节点都是一个 HTML 元素，由 HTMLElement 接口表示。反过来，`HTMLElement` 类实现了 `Node`，所以每个元素也是一个节点（但不是相反）。这样，Node 接口实现的结构特性也可用于 HTML 元素，允许它们相互嵌套、创建和删除、移动等等。

HTMLElement 接口是通用的，然而，它只提供所有 HTML 元素通用的功能，例如元素的 ID、它的坐标、组成元素的 HTML、关于滚动位置的信息等等。

为了扩展核心 HTMLElement 接口的功能以提供特定元素所需的功能，由 HTMLElement 的子类添加所需的属性和方法。例如，<canvas> 元素由类型为 HTMLCanvasElement 的对象表示。HTMLCanvasElement 通过添加 height 等属性和 getContext() 等方法来扩充 HTMLElement 类型} 提供特定于画布的功能。

HTML 元素类的整体继承如下所示：

HTML 元素的接口层次结构

因此，元素继承其所有祖先的属性和方法。例如，考虑一个 <a> 元素，它在 DOM 中由类型为 HTMLAnchorElement 的对象表示。那么，该元素包括该类文档中描述的特定于锚点的属性和方法，以及由 HTMLElement，Element，Node 和 EventTarget 定义的属性和方法。

每个层级都定义了元素的一些关键功能。例如从 Node 开始，元素继承了被另一个元素包含的能力以及包含其他元素的能力。而从 EventTarget 继承了接收和处理诸如鼠标点击、播放和暂停事件等事件的能力。

有些元素具有相同的功能，因此具有额外的中介类型。例如，<audio> 和 <video> 元素都呈现为视听媒体。它们对应的类型 HTMLAudioElement 和 HTMLVideoElement 都基于公共类型 HTMLMediaElement，而后者又基于 HTMLElement 以此类推。HTMLMediaElement 定义了音频和视频元素之间共有的方法和属性。

这些特定于元素的接口构成了 HTML DOM API 的大部分，并且是本文的重点。要了解有关 DOM 的实际结构的更多信息，请参阅 DOM 简介。

HTML DOM 目标受众​

HTML DOM 公开的功能是 Web 开发人员武器库中最常用的 API 之一。除了最简单的 Web 应用程序之外，所有应用程序都将使用 HTML DOM 的某些功能。

HTML DOM API 接口​

构成 HTML DOM API 的大部分接口几乎都是一对一地映射到单个的 HTML 元素，或者映射到具有类似功能的一小组元素。此外，HTML DOM API 还包括一些接口和类型来支持 HTML 元素的接口。

HTML 元素接口​

这些接口代表特定的 HTML 元素（或具有与之关联的相同属性和方法的相关元素集）。

废弃的 HTML 元素接口​

过时的 HTML 元素接口​

Web 应用程序和浏览器集成接口​

这些接口提供对包含 HTML 的浏览器窗口和文档的访问，以及对浏览器状态、可用插件（如果有）和各种配置选项的访问。

废弃的 Web 应用程序和浏览器集成接口​

过时的 Web 应用程序和浏览器集成接口​

表单支持接口​

这些接口提供用于创建和管理表单的元素所需的结构和功能，包括 <form> 和 <input> 元素。

画布和图像接口​

这些接口代表 Canvas API 使用的对象以及 <img> 元素和 <picture> 元素。

媒体接口​

媒体接口提供对媒体元素内容的 HTML 访问：<audio> 和 <video>。

拖放接口​

HTML_Drag_and_Drop_API 使用这些接口来表示单个可拖动（或拖动）项目、拖动或可拖动项目组，以及处理拖放过程。

页面历史接口​

History API 接口允许您访问有关浏览器历史记录的信息，以及在该历史记录中向前和向后移动浏览器的当前选项卡。

Web 组件接口​

Web Components API 使用这些接口来创建和管理可用的自定义元素。

杂项和支持接口​

这些支持对象类型在 HTML DOM API 中以多种方式使用。此外，PromiseRejectionEvent 表示当 JavaScript Promise 被拒绝时传递的事件。

属于其他 API 的接口​

HTML 规范中在技术上定义了几个接口，而实际上它们是其他 API 的一部分。

网络存储接口​

Web_Storage_API 为网站提供了在用户设备上临时或永久存储数据以供以后重用的能力。

Web Worker 接口​

Web Workers API 使用这些接口来建立工作线程与应用程序及其内容交互的能力，还支持窗口或应用程序之间的消息传递。

WebSocket 接口​

这些由 HTML 规范定义的接口由 WebSockets_API 使用。

服务器发送事件接口​

EventSource 接口表示发送或正在发送服务器发送事件的源。

实例​

在此实例中，监视 <input> 元素的 input 事件，以便根据给定字段当前是否具有值，来更新表单 “提交” 按钮的状态。

JavaScript​

const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton")

sendButton.disabled = true;
nameField.focus();

nameField.addEventListener("input", event => {
  const elem = event.target;
  const valid = elem.value.length != 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});

此代码使用 Document 接口的 getElementById() 方法来获取表示 ID 为 userName and sendButton 的 input 元素的 DOM 对象。通过这些，我们可以访问提供有关这些元素的信息并授予对这些元素的控制权的属性和方法。

“发送” 按钮的 HTMLInputElement 对象的 disabled 属性被设置为 true，这会禁用 “发送” 按钮，因此无法单击。此外，通过调用它从 HTMLElement 继承的 focus() 方法，使用户名输入字段成为活动焦点。

然后调用 addEventListener() 将 input 事件的处理程序添加到用户名输入框中。这段代码查看输入的值的长度；如果它为零，则 “发送” 按钮在尚未禁用的情况下被禁用。否则，代码将确保按钮已启用。

有了这个，当用户名输入字段有值时，“发送” 按钮总是启用，当它为空时禁用。

HTML​

表单的 HTML 如下所示：

<p>请提供以下信息。标有 “*” 的项目为必填项。</p>
<form action="" method="get">
  <p>
    <label for="userName" required>你的名字：</label>
    <input type="text" id="userName"> (*)
  </p>
  <p>
    <label for="email">邮箱：</label>
    <input type="email" id="userEmail">
  </p>
  <input type="submit" value="发送" id="sendButton">
</form>

结果​

<p>请提供以下信息。标有 “*” 的项目为必填项。</p>
<form action="" method="get">
  <p>
    <label for="userName" required>你的名字：</label>
    <input type="text" id="userName"> (*)
  </p>
  <p>
    <label for="email">邮箱：</label>
    <input type="email" id="userEmail">
  </p>
  <input type="submit" value="发送" id="sendButton">
</form>

<script>
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton")

sendButton.disabled = true;
nameField.focus();

nameField.addEventListener("input", event => {
  const elem = event.target;
  const valid = elem.value.length != 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});
</script>

规范​

规范状态备注
HTML Living StandardLiving StandardWHATWG HTML 规范
HTML5Recommendation自 Document Object Model (DOM) Level 2 HTML Specification 以来没有变化。
Document Object Model (DOM) Level 2 HTML SpecificationObsolete自 Document Object Model (DOM) Level 1 Specification 以来没有变化。
Document Object Model (DOM) Level 1 SpecificationObsolete初始定义。

桌面浏览器兼容性​

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持11215.581.3
accessKey171255.5≤12.16
accessKeyLabel不支持1不支持18不支持不支持114
animationcancel 事件83283254不支持69212
animationend 事件43125110309
animationiteration 事件43125110309
animationstart 事件43125110309
attachInternals777993不支持64不支持3
attributeStyleMap6679不支持不支持53不支持
autocapitalize667983不支持53不支持
autofocus

79

1 — 794

79

12 — 794

14104

66

≤12.1 — 664

15.4

44

beforeinput 事件6079

87

74 — 87

不支持4710.1
beforematch 事件102102不支持不支持不支持不支持
blur1121.55.583
change 事件1121993
click951236 75.510.56
contentEditable11235.593
contextMenu不支持不支持

85

8 — 85

不支持不支持不支持
copy 事件1123

9

5.511

≤12.13
cut 事件1129

9

5.511

≤12.13
dataset812611115.1
dir11215.5≤12.13
draggable312210125
enterKeyHint7779

94

79 — 94

不支持6413.1
focus1121.55.583
gotpointercapture 事件571759不支持4413
hidden61211111.65.1
inert

102

60 — 102

102

79 — 102

preview不支持4715.5
innerText112455.59.63
inputMode6679

95

77 — 95

不支持5312.1
input 事件1

79

12 — 7912

691311.63.1
isContentEditable11245.5≤12.13
lang11215.5≤12.13
lostpointercapture 事件571759不支持4413
nonce617975不支持481014
offsetHeight11215.583
offsetLeft11215.583
offsetParent11215.583
offsetTop11215.583
offsetWidth11215.583
outerText112985.5≤12.11.3
paste 事件1129

9

5.511

≤12.13
spellcheck912210≤12.15.1
style11215.583
tabIndex1

18

1215

15.515≤12.13.1
title11215.5≤12.13
transitioncancel 事件747953不支持6213.1
transitionend 事件

26

116

12

7916

5110

12.1

1516

11.6 — 1517

7

416

transitionrun 事件747953不支持6213.1
transitionstart 事件741253106213.1
translate1979不支持不支持156

移动浏览器兼容性​

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持≤3718未知4未知10.11
accessKey4.418未知5未知≤12.16
accessKeyLabel不支持1不支持1未知8未知不支持114
animationcancel 事件832832未知54未知59212
animationend 事件4343未知51未知309
animationiteration 事件4343未知51未知309
animationstart 事件4343未知51未知309
attachInternals7777未知93未知55不支持3
attributeStyleMap6666未知不支持未知47不支持
autocapitalize6666未知不支持未知4710.3
autofocus

79

≤37 — 794

79

18 — 794

未知44未知

57

≤12.1 — 574

15.4

3.24

beforeinput 事件6060未知87未知4410.3
beforematch 事件102102未知不支持未知70不支持
blur4.418未知4未知10.11
change 事件4.418未知4未知10.12
click4.410185未知46 8未知116
contentEditable4.418未知4未知10.11
contextMenu不支持不支持未知8 — 85未知不支持不支持
copy 事件4.418未知4未知≤12.11
cut 事件4.418未知9未知≤12.11
dataset318未知6未知115
dir4.418未知4未知≤12.11
draggable4.418未知4未知124
enterKeyHint7777未知94未知5513.4
focus4.418未知4未知10.11
gotpointercapture 事件5757未知79未知4313
hidden318未知4未知125
inert102

102

60 — 102

未知不支持未知7015.5
innerText4.418未知45未知10.11
inputMode6666未知79未知4712.2
input 事件4.418未知6未知122
isContentEditable4.418未知4未知≤12.11
lang4.418未知4未知≤12.11
lostpointercapture 事件5757未知79未知4313
nonce6161未知79未知451014
offsetHeight4.418未知4未知10.11
offsetLeft4.418未知4未知10.11
offsetParent4.418未知4未知10.11
offsetTop4.418未知4未知10.11
offsetWidth4.418未知4未知10.11
outerText4.418未知98未知≤12.11
paste 事件4.418未知9未知≤12.11
spellcheck318未知4未知≤12.15
style4.418未知4未知10.11
tabIndex4.418未知4未知≤12.12
title4.418未知4未知≤12.11
transitioncancel 事件7474未知53未知5313.4
transitionend 事件

≤37

≤3716

26

1816

未知51未知

12.1

1416

12 — 1417

7

3.216

transitionrun 事件7474未知53未知5313.4
transitionstart 事件7474未知53未知5313.4
translate4.425未知不支持未知146

1. See bug 393466.

2. The onanimationcancel property is not supported. To listen to this event, use element.addEventListener('animationcancel', function() );. See bug 868224.

3. See bug 197960.

4. Supported for HTMLButtonElement, HTMLInputElement, HTMLSelectElement, and HTMLTextAreaElement.

5. 在 Chrome 19 之前，click() 仅在按钮和输入框上定义。

6. 在 Firefox 5 之前，click() 仅在按钮和输入框上定义，而对文本和文件输入无效。

7. 从 Firefox 75 开始，即使该元素未附加到 DOM 树，click() 函数也可以使用。

8. Starting in Firefox for Android 79, the click() function works even when the element is not attached to a DOM tree.

9. 在 Samsung Internet 1.5 之前，click() 仅在按钮和输入上定义。

10. 在 Android WebView 4.4 之前，click() 仅在按钮和输入上定义。

11. Before Internet Explorer 9, this event is not supported via addEventListener.

12. 不支持 select，checkbox 或 radio。

13. 仅支持类型为 text 和 password 的输入框。

14. The property is defined only for its useful elements: <link>, <script>, and <style>; it is undefined for all other elements.

15. 对于没有显式 tabindex 属性的元素，返回错误的值。有关详细信息，请参见问题 4365703。

16. 通过 webkitTransitionEnd 支持。

17. 通过 oTransitionEnd 支持。

相关链接​

参考​

指南​