HTML DOM API

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

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

HTML DOM 概念和用法

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

HTML 文档的结构

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

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

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

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

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

虽然Document 接口是在DOM规范的一部分中定义的，但 HTML 规范对其进行了重大增强，以添加特定于在 Web 浏览器上下文中使用 DOM 以及特定于使用它来表示 HTML 文档的信息。

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

HTML 元素接口

Element 接口已进一步调整以专门表示 HTML 元素，方法是引入HTMLElement 接口，所有更具体的 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 API以及<img>元素和<picture>元素使用的对象。

媒体接口

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

拖放接口

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

页面历史记录接口

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

Web组件接口

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

其他和支持接口

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

属于其他API的接口

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

Web存储接口

Web存储API使网站能够在用户设备上临时或永久地存储数据，以便以后重复使用。

Web Workers接口

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

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

参考

指南