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

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

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

通过 DOM 访问和控制 HTML 元素。
访问和操作表单数据。
与 2D 图像的内容和 HTML <canvas> 的上下文进行交互，例如在它们之上绘图。
管理连接到 HTML 媒体元素（<audio> 和 <video>）的媒体。
在网页上拖放内容。
访问浏览器导航历史记录
其他 API 的支持和连接接口，例如 Web 组件、Web 存储、Web 工作线程、WebSocket 和服务器发送的事件。

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 的内容包括：

支持在加载页面时访问 HTTP 标头提供的各种信息，例如加载文档的地址、cookies、修改日期、来源站点等。
访问文档 <head> 块和 body，以及包含在文档中的图像、链接、脚本等的列表。
支持通过检查焦点和对可编辑的内容执行命令来与用户互动。
HTML 标准定义的文档事件的事件处理程序，允许访问鼠标和键盘事件、拖放、媒体控制等。
可以传递给元素和文档的事件的事件处理程序；这些目前仅包括复制、剪切和粘贴操作。

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 元素接口

HTMLMarqueeElement

过时的 HTML 元素接口

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

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

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

External

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

表单支持接口

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

画布和图像接口

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

媒体接口

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

拖放接口

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

页面历史接口

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

Web 组件接口

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

CustomElementRegistry

杂项和支持接口

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

属于其他 API 的接口

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

网络存储接口

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

Web Worker 接口

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

WebSocket 接口

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

服务器发送事件接口

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

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 Standard	现行的标准	WHATWG HTML 规范
HTML5	推荐	自 Document Object Model (DOM) Level 2 HTML Specification 以来没有变化。
Document Object Model (DOM) Level 2 HTML Specification	已过时	自 Document Object Model (DOM) Level 1 Specification 以来没有变化。
Document Object Model (DOM) Level 1 Specification	已过时	初始定义。

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	1	12	1	5.5	8	3
`accessKey`	17	12	5	未知	支持	6
`accessKeyLabel`	不支持	不支持	8	不支持	未知	14
`animationcancel` 事件	不支持	不支持	54	不支持	不支持	13.1 12
`animationend` 事件	43	12	支持	10	30	9
`animationiteration` 事件	43	12	51	10	30	9
`animationstart` 事件	43	12	51	10	30	9
`autocapitalize`	66	≤79	未知	不支持	未知	未知
`beforeinput` 事件	支持	79	不支持	不支持	支持	支持
`blur`	1	12	5	9	8	3
click()	9¹	12	3²³	8	10.5	6
`contentEditable`	1	12	3	8	9	6
`contextMenu`	45 — 61	≤18 — 79	1	未知	未知	未知
`dataset`	8	12	6	11	11	5.1
`dir`	1	12	1	未知	支持	6
`draggable`	7	12	2	支持	12	6
`dropzone`	14 — 59	≤18 — 79	1	未知	未知	未知
`focus`	1	12	5	9	8	3
`forceSpellCheck`	不支持	不支持	不支持	不支持	不支持	未知
`gotpointercapture` 事件	57	≤79	59	未知	44	未知
`hidden`	6	12	1	11	11.6	6
`inert`	60	79	未知	未知	47	未知
`innerText`	1	12	45	5.5	9.6	3
`input` 事件	1	79 12 — 79⁶	6	9⁷	11.6	3.1
`inputMode`	66	≤79	77	不支持	支持	未知
`isContentEditable`	1	12	1	未知	支持	6
`itemId`	17 — 28	不支持	6	不支持	11 — 15	未知
`itemProp`	17 — 28	不支持	6	不支持	11 — 15	未知
`itemRef`	17 — 28	不支持	6	不支持	11 — 15	未知
`itemScope`	17 — 28	不支持	6	不支持	11 — 15	未知
`itemType`	17 — 28	不支持	6	不支持	11 — 15	未知
`itemValue`	17 — 28	不支持	6	不支持	11 — 15	未知
`lang`	1	12	1	未知	支持	6
`lostpointercapture` 事件	57	≤79	59	未知	44	未知
`noModule`	60	≤79	未知	不支持	47	未知
`nonce`	61	79	75	不支持	支持	10
`offsetHeight`	1	12	1	8	8	3
`offsetLeft`	1	12	1	8	8	3
`offsetParent`	1	12	1	8	8	3
`offsetTop`	1	12	1	8	8	3
`offsetWidth`	1	12	1	8	8	3
`oncopy`	71	12	3	未知	支持	支持
`oncut`	71	12	3	未知	支持	支持
`onModule`	60	≤79	未知	未知	47	未知
`onpaste`	71	12	3	未知	支持	支持
`outerText`	43	12	不支持	支持	支持	6
`pointercancel` 事件	55	12 12 — 79⁸	59 29	11 10⁸	未知	不支持
`pointerdown` 事件	55	12 12 — 79⁹	59 29	11 10⁹	未知	不支持
`pointerenter` 事件	55	12 12 — 79¹⁰	59 29	11 10¹⁰	未知	不支持
`pointerleave` 事件	55	12 12 — 79¹¹	59 29	11 10¹¹	未知	不支持
`pointermove` 事件	55	12 12 — 79¹²	59 29	11 10¹²	未知	不支持
`pointerout` 事件	55	12 12 — 79¹³	59 29	11 10¹³	未知	不支持
`pointerover` 事件	55	12 12 — 79¹⁴	59 29	11 10¹⁴	未知	不支持
`pointerup` 事件	55	12 12 — 79¹⁵	59 29	11 10¹⁵	未知	不支持
`spellcheck`	43	12	2	未知	支持	6
`style`	45	12	1	8	8	11
`tabIndex`	1	18 12¹⁶	1	8¹⁶	支持	6
`title`	1	12	1	未知	支持	6
`transitioncancel` 事件	74	≤79	53	未知	62	13.1 12
`transitionend` 事件	26 1¹⁷	≤79 ≤79¹⁷	51	10	12.1 15¹⁷ 11.6 — 15¹⁸	6.1 4¹⁷
`transitionrun` 事件	74	≤79	53	未知	62	13.1 12
`transitionstart` 事件	74	≤79	53	未知	62	13.1 12
`translate`	19	79	不支持	不支持	不支持	6

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	1	18	未知	4	未知	10.1	1
`accessKey`	4.4	18	未知	5	未知	支持	支持
`accessKeyLabel`	不支持	不支持	未知	8	未知	未知	14
`animationcancel` 事件	不支持	不支持	未知	54	未知	不支持	13.4 12
`animationend` 事件	43	43	未知	支持	未知	30	9
`animationiteration` 事件	43	43	未知	51	未知	30	9
`animationstart` 事件	43	43	未知	51	未知	30	9
`autocapitalize`	66	66	未知	未知	未知	未知	未知
`beforeinput` 事件	支持	支持	未知	不支持	未知	支持	支持
`blur`	4.4	18	未知	5	未知	10.1	1
click()	≤37⁵	18¹	未知	5	未知	11	6
`contentEditable`	4.4	18	未知	4	未知	支持	支持
`contextMenu`	45 — 61	45 — 61	未知	4	未知	未知	未知
`dataset`	4.4	18	未知	6	未知	11	5.1
`dir`	4.4	18	未知	4	未知	支持	支持
`draggable`	4.4	18	未知	4	未知	支持	支持
`dropzone`	4.4 — 59	18 — 59	未知	4	未知	未知	未知
`focus`	4.4	18	未知	5	未知	10.1	1
`forceSpellCheck`	不支持	不支持	未知	4	未知	未知	未知
`gotpointercapture` 事件	57	57	未知	不支持	未知	43	未知
`hidden`	≤37	18	未知	4	未知	12	6
`inert`	不支持	60	未知	未知	未知	44	未知
`innerText`	4.4	18	未知	45	未知	10.1	4
`input` 事件	1	18	未知	6	未知	12	2
`inputMode`	66	66	未知	不支持	未知	支持	未知
`isContentEditable`	4.4	18	未知	4	未知	支持	支持
`itemId`	不支持	18 — 28	未知	4	未知	未知	未知
`itemProp`	不支持	18 — 28	未知	4	未知	未知	未知
`itemRef`	不支持	18 — 28	未知	4	未知	未知	未知
`itemScope`	不支持	18 — 28	未知	4	未知	未知	未知
`itemType`	不支持	18 — 28	未知	4	未知	未知	未知
`itemValue`	不支持	18 — 28	未知	4	未知	未知	未知
`lang`	4.4	18	未知	4	未知	支持	支持
`lostpointercapture` 事件	57	57	未知	不支持	未知	43	未知
`noModule`	60	60	未知	未知	未知	44	未知
`nonce`	61	61	未知	不支持	未知	支持	10
`offsetHeight`	1	18	未知	4	未知	10.1	1
`offsetLeft`	1	18	未知	4	未知	10.1	1
`offsetParent`	1	18	未知	4	未知	10.1	1
`offsetTop`	1	18	未知	4	未知	10.1	1
`offsetWidth`	1	18	未知	4	未知	10.1	1
`oncopy`	71	71	未知	4	未知	支持	支持
`oncut`	71	71	未知	4	未知	支持	支持
`onModule`	60	60	未知	未知	未知	44	未知
`onpaste`	71	71	未知	4	未知	支持	支持
`outerText`	43	43	未知	不支持	未知	支持	支持
`pointercancel` 事件	55	55	未知	29	未知	未知	不支持
`pointerdown` 事件	55	55	未知	29	未知	未知	不支持
`pointerenter` 事件	55	55	未知	29	未知	未知	不支持
`pointerleave` 事件	55	55	未知	29	未知	未知	不支持
`pointermove` 事件	55	55	未知	29	未知	未知	不支持
`pointerout` 事件	55	55	未知	29	未知	未知	不支持
`pointerover` 事件	55	55	未知	29	未知	未知	不支持
`pointerup` 事件	55	55	未知	29	未知	未知	不支持
`spellcheck`	43	43	未知	4	未知	支持	支持
`style`	45	45	未知	4	未知	10.1	11
`tabIndex`	4.4	18	未知	4	未知	支持	支持
`title`	4.4	18	未知	4	未知	支持	支持
`transitioncancel` 事件	74	74	未知	53	未知	53	13.4 12
`transitionend` 事件	≤37 1¹⁷	26 18¹⁷	未知	51	未知	12.1 14¹⁷ 12 — 14¹⁸	7 3.2¹⁷
`transitionrun` 事件	74	74	未知	53	未知	53	13.4 12
`transitionstart` 事件	74	74	未知	53	未知	53	13.4 12
`translate`	4.4	25	未知	4	未知	支持	支持

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

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

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

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

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

6. 不支持 select，checkbox 或 radio。

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

8. 通过 mspointercancel 支持。

9. 通过 mspointerdown 支持。

10. 通过 mspointerenter 支持。

11. 通过 mspointerleave 支持。

12. 通过 mspointermove 支持。

13. 通过 mspointerout 支持。

14. 通过 mspointerover 支持。

15. 通过 mspointerup 支持。

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

17. 通过 webkitTransitionEnd 支持。

18. 通过 oTransitionEnd 支持。

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

HTML DOM 概念和用法

HTML 文档的结构

HTML 元素接口

HTML DOM 目标受众

HTML DOM API 接口

HTML 元素接口

废弃的 HTML 元素接口

过时的 HTML 元素接口

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

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

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

表单支持接口

画布和图像接口

媒体接口

拖放接口

页面历史接口

Web 组件接口

杂项和支持接口

属于其他 API 的接口

网络存储接口

Web Worker 接口

WebSocket 接口

服务器发送事件接口

实例

JavaScript

HTML

结果

规范

桌面浏览器兼容性

移动浏览器兼容性

相关链接

参考

指南

Web 接口

规范

更多教程

Sponsors