1. Web
  2. Web API
  3. The HTML DOM API

The HTML DOM API

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

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

HTML DOM 概念和用法

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

HTML 文档的结构

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

节点可以是纯粹的组织性的，提供一种将其他节点分组或构建层次结构的方式；其他节点可以表示文档的可见组件。每个节点都基于 Node 接口，该接口提供用于获取节点信息以及在 DOM 中创建、删除和组织节点的方法。

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

例如，考虑一个包含两个元素的文档，其中一个元素包含另外两个嵌套元素

Structure of a document with elements inside a document in a window

虽然 Document 接口作为 DOM 规范的一部分被定义，但 HTML 规范显著增强了它，以添加在 Web 浏览器上下文中使用 DOM 的特定信息，以及专门用于表示 HTML 文档的信息。

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

HTML 元素接口

Element 接口通过引入 HTMLElement 接口（所有更具体的 HTML 元素类都继承自该接口）进一步调整以专门表示 HTML 元素。这扩展了 Element 类，为元素节点添加了 HTML 特定的通用功能。HTMLElement 添加的属性例如包括 hidden 和 innerText。

HTML 文档是一个 DOM 树，其中每个节点都是一个 HTML 元素，由 HTMLElement 接口表示。HTMLElement 类反过来实现 Node，因此每个元素也是一个节点（反之则不然）。通过这种方式，Node 接口实现的结构特性也适用于 HTML 元素，允许它们相互嵌套、创建和删除、移动等。

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

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

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

Hierarchy of interfaces for HTML elements

因此，元素继承其所有祖先的属性和方法。例如，考虑一个 <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 和图像接口

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

媒体接口

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

拖放接口

这些接口由 HTML 拖放 API 使用，用于表示单个可拖动（或已拖动）项目、已拖动或可拖动项目的组，以及处理拖放过程。

页面历史接口

History API 接口让你可以访问浏览器历史记录的信息，以及在历史记录中向前和向后切换浏览器当前选项卡。

Web Components 接口

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

杂项和支持接口

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

属于其他 API 的接口

一些接口在技术上在 HTML 规范中定义，但实际上是其他 API 的一部分。

Web 存储接口

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

Web Workers 接口

这些接口由 Web Workers API 使用，既用于建立 worker 与应用程序及其内容交互的能力，也用于支持窗口或应用程序之间的消息传递。

WebSocket 接口

这些接口由 HTML 规范定义，由 WebSockets API 使用。

服务器发送事件接口

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

示例

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

JavaScript

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

sendButton.disabled = true;
// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
// 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 和 sendButton 的 <input> 元素的 DOM 对象。通过这些，我们可以访问提供信息和控制这些元素的属性和方法。

“发送”按钮的 HTMLInputElement 对象的 disabled 属性设置为 true，从而禁用“发送”按钮，使其无法点击。此外，通过调用从 HTMLElement 继承的 focus() 方法，用户名字段获得活动焦点。

然后调用 addEventListener() 将 input 事件的处理程序添加到用户名字段。此代码检查输入当前值的长度；如果为零，则“发送”按钮被禁用（如果尚未禁用）。否则，代码会确保按钮已启用。

这样一来，只要用户名字段有值，“发送”按钮就始终启用；当它为空时，则禁用。

HTML

表单的 HTML 如下所示：

html
<p>Please provide the information below. Items marked with "*" are required.</p>
<form action="" method="get">
  <p>
    <label for="userName" required>Your name:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="userEmail">Email:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="Send" id="sendButton" />
</form>

结果

规范

规范
HTML
# htmlelement

浏览器兼容性

另见

参考

指南

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.