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.