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

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

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

HTML DOM 概念和用法

在本文中,我们将重点关注 HTML DOM 中涉及与 HTML 元素交互的部分。其他方面的讨论,例如 拖放WebSocketsWeb 存储等可以在这些 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 添加的属性包括例如 hiddeninnerTextHTMLElement 还添加了所有全局事件处理程序

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 的对象表示。那么,该元素包括该类文档中描述的特定于锚点的属性和方法,以及由 HTMLElementElementNodeEventTarget 定义的属性和方法。

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

有些元素具有相同的功能,因此具有额外的中介类型。例如,<audio><video> 元素都呈现为视听媒体。它们对应的类型 HTMLAudioElementHTMLVideoElement 都基于公共类型 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 sendButtoninput 元素的 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 已过时 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持11215.583
accessKey17125 未知 支持6
accessKeyLabel 不支持 不支持8 不支持 未知14
animationcancel 事件 不支持 不支持54 不支持 不支持

13.1

12

animationend 事件4312 支持10309
animationiteration 事件43125110309
animationstart 事件43125110309
autocapitalize66≤79 未知 不支持 未知 未知
beforeinput 事件 支持79 不支持 不支持 支持 支持
blur1125983
click()9112323810.56
contentEditable1123896
contextMenu45 — 61≤18 — 791 未知 未知 未知
dataset812611115.1
dir1121 未知 支持6
draggable7122 支持126
dropzone14 — 59≤18 — 791 未知 未知 未知
focus1125983
forceSpellCheck 不支持 不支持 不支持 不支持 不支持 未知
gotpointercapture 事件57≤7959 未知44 未知
hidden61211111.66
inert6079 未知 未知47 未知
innerText112455.59.63
input 事件1

79

12 — 796

69711.63.1
inputMode66≤7977 不支持 支持 未知
isContentEditable1121 未知 支持6
itemId17 — 28 不支持6 不支持11 — 15 未知
itemProp17 — 28 不支持6 不支持11 — 15 未知
itemRef17 — 28 不支持6 不支持11 — 15 未知
itemScope17 — 28 不支持6 不支持11 — 15 未知
itemType17 — 28 不支持6 不支持11 — 15 未知
itemValue17 — 28 不支持6 不支持11 — 15 未知
lang1121 未知 支持6
lostpointercapture 事件57≤7959 未知44 未知
noModule60≤79 未知 不支持47 未知
nonce617975 不支持 支持10
offsetHeight1121883
offsetLeft1121883
offsetParent1121883
offsetTop1121883
offsetWidth1121883
oncopy71123 未知 支持 支持
oncut71123 未知 支持 支持
onModule60≤79 未知 未知47 未知
onpaste71123 未知 支持 支持
outerText4312 不支持 支持 支持6
pointercancel 事件55

12

12 — 798

59

29

11

108

未知 不支持
pointerdown 事件55

12

12 — 799

59

29

11

109

未知 不支持
pointerenter 事件55

12

12 — 7910

59

29

11

1010

未知 不支持
pointerleave 事件55

12

12 — 7911

59

29

11

1011

未知 不支持
pointermove 事件55

12

12 — 7912

59

29

11

1012

未知 不支持
pointerout 事件55

12

12 — 7913

59

29

11

1013

未知 不支持
pointerover 事件55

12

12 — 7914

59

29

11

1014

未知 不支持
pointerup 事件55

12

12 — 7915

59

29

11

1015

未知 不支持
spellcheck43122 未知 支持6
style451218811
tabIndex1

18

1216

1816 支持6
title1121 未知 支持6
transitioncancel 事件74≤7953 未知62

13.1

12

transitionend 事件

26

117

≤79

≤7917

5110

12.1

1517

11.6 — 1518

6.1

417

transitionrun 事件74≤7953 未知62

13.1

12

transitionstart 事件74≤7953 未知62

13.1

12

translate1979 不支持 不支持 不支持6

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持118 未知4 未知10.11
accessKey4.418 未知5 未知 支持 支持
accessKeyLabel 不支持 不支持 未知8 未知 未知14
animationcancel 事件 不支持 不支持 未知54 未知 不支持

13.4

12

animationend 事件4343 未知 支持 未知309
animationiteration 事件4343 未知51 未知309
animationstart 事件4343 未知51 未知309
autocapitalize6666 未知 未知 未知 未知 未知
beforeinput 事件 支持 支持 未知 不支持 未知 支持 支持
blur4.418 未知5 未知10.11
click()≤375181 未知5 未知116
contentEditable4.418 未知4 未知 支持 支持
contextMenu45 — 6145 — 61 未知4 未知 未知 未知
dataset4.418 未知6 未知115.1
dir4.418 未知4 未知 支持 支持
draggable4.418 未知4 未知 支持 支持
dropzone4.4 — 5918 — 59 未知4 未知 未知 未知
focus4.418 未知5 未知10.11
forceSpellCheck 不支持 不支持 未知4 未知 未知 未知
gotpointercapture 事件5757 未知 不支持 未知43 未知
hidden≤3718 未知4 未知126
inert 不支持60 未知 未知 未知44 未知
innerText4.418 未知45 未知10.14
input 事件118 未知6 未知122
inputMode6666 未知 不支持 未知 支持 未知
isContentEditable4.418 未知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 未知 未知 未知
lang4.418 未知4 未知 支持 支持
lostpointercapture 事件5757 未知 不支持 未知43 未知
noModule6060 未知 未知 未知44 未知
nonce6161 未知 不支持 未知 支持10
offsetHeight118 未知4 未知10.11
offsetLeft118 未知4 未知10.11
offsetParent118 未知4 未知10.11
offsetTop118 未知4 未知10.11
offsetWidth118 未知4 未知10.11
oncopy7171 未知4 未知 支持 支持
oncut7171 未知4 未知 支持 支持
onModule6060 未知 未知 未知44 未知
onpaste7171 未知4 未知 支持 支持
outerText4343 未知 不支持 未知 支持 支持
pointercancel 事件5555 未知29 未知 未知 不支持
pointerdown 事件5555 未知29 未知 未知 不支持
pointerenter 事件5555 未知29 未知 未知 不支持
pointerleave 事件5555 未知29 未知 未知 不支持
pointermove 事件5555 未知29 未知 未知 不支持
pointerout 事件5555 未知29 未知 未知 不支持
pointerover 事件5555 未知29 未知 未知 不支持
pointerup 事件5555 未知29 未知 未知 不支持
spellcheck4343 未知4 未知 支持 支持
style4545 未知4 未知10.111
tabIndex4.418 未知4 未知 支持 支持
title4.418 未知4 未知 支持 支持
transitioncancel 事件7474 未知53 未知53

13.4

12

transitionend 事件

≤37

117

26

1817

未知51 未知

12.1

1417

12 — 1418

7

3.217

transitionrun 事件7474 未知53 未知53

13.4

12

transitionstart 事件7474 未知53 未知53

13.4

12

translate4.425 未知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. 不支持 selectcheckboxradio

7. 仅支持类型为 textpassword 的输入框。

8. 通过 mspointercancel 支持。

9. 通过 mspointerdown 支持。

10. 通过 mspointerenter 支持。

11. 通过 mspointerleave 支持。

12. 通过 mspointermove 支持。

13. 通过 mspointerout 支持。

14. 通过 mspointerover 支持。

15. 通过 mspointerup 支持。

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

17. 通过 webkitTransitionEnd 支持。

18. 通过 oTransitionEnd 支持。

相关链接

参考

指南