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

HTML DOM API

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

HTML DOM API được tạo thành từ các giao diện định nghĩa chức năng của từng phần tử trong HTML, cũng như bất kỳ loại và giao diện hỗ trợ nào mà chúng dựa vào.

Các lĩnh vực chức năng được bao gồm trong HTML DOM API bao gồm:

  • Truy cập và kiểm soát các phần tử HTML thông qua DOM.
  • Truy cập và thao tác dữ liệu biểu mẫu.
  • Tương tác với nội dung của hình ảnh 2D và ngữ cảnh của HTML <canvas>, ví dụ để vẽ lên chúng.
  • Quản lý phương tiện được kết nối với các phần tử phương tiện HTML (<audio> và <video>).
  • Kéo và thả nội dung trên các trang web.
  • Truy cập lịch sử điều hướng trình duyệt.
  • Các giao diện hỗ trợ và kết nối cho các API khác như Web Components, Web Storage, Web Workers, WebSocket, và Server-sent events.

Khái niệm và cách sử dụng HTML DOM

Trong bài viết này, chúng ta sẽ tập trung vào các phần của HTML DOM liên quan đến việc tương tác với các phần tử HTML.

Cấu trúc tài liệu HTML

Document Object Model (DOM) là kiến trúc mô tả cấu trúc của document; mỗi tài liệu được đại diện bởi một phiên bản của giao diện Document. Một tài liệu, lần lượt, bao gồm cây phân cấp của các nút, trong đó nút là bản ghi cơ bản đại diện cho một đối tượng đơn lẻ trong tài liệu (chẳng hạn như phần tử hoặc nút văn bản).

Các nút không có khái niệm bao gồm nội dung thực sự được hiển thị trong tài liệu. Khái niệm cơ bản về nút có thể đại diện cho nội dung trực quan được giới thiệu bởi giao diện Element.

Ví dụ, hãy xem xét tài liệu có hai phần tử, một trong số đó có thêm hai phần tử lồng bên trong:

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

Giao diện phần tử HTML

Giao diện Element đã được điều chỉnh thêm để đại diện cụ thể cho các phần tử HTML bằng cách giới thiệu giao diện HTMLElement, mà tất cả các lớp phần tử HTML cụ thể hơn đều kế thừa từ đó.

Giao diện HTMLElement là chung, tuy nhiên, chỉ cung cấp chức năng chung cho tất cả các phần tử HTML như ID của phần tử, tọa độ của nó, HTML tạo thành phần tử, thông tin về vị trí cuộn, v.v.

Cấu trúc kế thừa tổng thể cho các lớp phần tử HTML trông như sau:

Hierarchy of interfaces for HTML elements

Đối tượng sử dụng HTML DOM

Các tính năng được cung cấp bởi HTML DOM là một trong những API được sử dụng phổ biến nhất trong bộ công cụ của nhà phát triển web. Tất cả các ứng dụng web ngoại trừ đơn giản nhất sẽ sử dụng một số tính năng của HTML DOM.

Giao diện HTML DOM API

Phần lớn các giao diện tạo nên HTML DOM API ánh xạ gần như một-một với các phần tử HTML riêng lẻ, hoặc với một nhóm nhỏ các phần tử có chức năng tương tự.

Giao diện phần tử HTML

Các giao diện này đại diện cho các phần tử HTML cụ thể (hoặc tập hợp các phần tử liên quan có cùng thuộc tính và phương thức).

Giao diện phần tử HTML đã lỗi thời

Giao diện phần tử HTML đã lỗi thời hoàn toàn

Giao diện ứng dụng web và tích hợp trình duyệt

Các giao diện này cung cấp quyền truy cập vào cửa sổ trình duyệt và tài liệu chứa HTML, cũng như trạng thái của trình duyệt.

Giao diện ứng dụng web và tích hợp trình duyệt đã lỗi thời

Giao diện ứng dụng web và tích hợp trình duyệt đã lỗi thời hoàn toàn

Giao diện hỗ trợ biểu mẫu

Các giao diện này cung cấp cấu trúc và chức năng cần thiết bởi các phần tử được sử dụng để tạo và quản lý biểu mẫu.

Giao diện canvas và hình ảnh

Các giao diện này đại diện cho các đối tượng được sử dụng bởi Canvas API cũng như phần tử <img> và <picture>.

Giao diện phương tiện

Các giao diện phương tiện cung cấp quyền truy cập HTML vào nội dung của các phần tử phương tiện: <audio> và <video>.

Giao diện kéo và thả

Các giao diện này được sử dụng bởi HTML Drag and Drop API để đại diện cho các mục có thể kéo riêng lẻ.

Giao diện lịch sử trang

Các giao diện History API cho phép bạn truy cập thông tin về lịch sử trình duyệt.

Giao diện Web Components

Các giao diện này được sử dụng bởi Web Components API để tạo và quản lý các phần tử tùy chỉnh có sẵn.

Giao diện hỗ trợ và phụ trợ khác

Các kiểu đối tượng hỗ trợ này được sử dụng theo nhiều cách khác nhau trong HTML DOM API. Ngoài ra, PromiseRejectionEvent đại diện cho sự kiện được gửi khi Promise JavaScript bị từ chối.

Giao diện thuộc về các API khác

Một số giao diện được định nghĩa về mặt kỹ thuật trong đặc tả HTML nhưng thực sự là một phần của các API khác.

Giao diện Web Storage

Web Storage API cung cấp khả năng cho các trang web lưu trữ dữ liệu tạm thời hoặc vĩnh viễn trên thiết bị của người dùng.

Giao diện Web Workers

Các giao diện này được sử dụng bởi Web Workers API.

Giao diện WebSocket

Các giao diện này được sử dụng bởi WebSockets API.

Giao diện sự kiện gửi từ máy chủ

Giao diện EventSource đại diện cho nguồn đã gửi hoặc đang gửi sự kiện gửi từ máy chủ.

Ví dụ

Trong ví dụ này, sự kiện input của phần tử <input> được theo dõi để cập nhật trạng thái của nút "submit" của biểu mẫu.

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;
  }
});

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>

Kết quả

Thông số kỹ thuật

Thông số kỹ thuật
HTML
# htmlelement

Tương thích trình duyệt

Xem thêm

Tài liệu tham khảo

Hướng dẫn

Help improve MDN

Tìm hiểu cách đóng góp

Trang này được sửa đổi lần cuối vào bởi những người đóng góp MDN.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này