JavaScript HTML DOM

Qua HTML DOM, JavaScript có thể truy cập và thay đổi tất cả các yếu tố trong tài liệu HTML.

HTML DOM（mô hình đối tượng tài liệu）

Khi trang web được tải, trình duyệt sẽ tạo mô hình đối tượng tài liệu (Document Object Model）。

HTML DOM Mô hình được cấu trúc hóaCây đối tượng:

Cây DOM của đối tượng

Cây HTML DOM

Qua mô hình đối tượng này, JavaScript nhận được tất cả sức mạnh để tạo động HTML:

  • JavaScript có thể thay đổi tất cả các yếu tố HTML trong trang web
  • JavaScript có thể thay đổi tất cả các thuộc tính HTML trong trang web
  • JavaScript có thể thay đổi tất cả các phong cách CSS trong trang web
  • JavaScript có thể xóa các yếu tố và thuộc tính HTML đã có
  • JavaScript có thể thêm các yếu tố và thuộc tính HTML mới
  • JavaScript có thể phản hồi lại tất cả các sự kiện HTML đã có trong trang web
  • JavaScript có thể tạo các sự kiện HTML mới trong trang web

Bạn sẽ học được điều gì

Trong các chương tiếp theo của hướng dẫn này, bạn sẽ học được:

  • Cách thay đổi nội dung của yếu tố HTML
  • Cách thay đổi mẫu CSS của phần tử HTML
  • Cách phản hồi sự kiện HTML DOM
  • Cách thêm và xóa phần tử HTML

DOM là gì?

DOM là một tiêu chuẩn của W3C (World Wide Web Consortium).

DOM định nghĩa các tiêu chuẩn truy cập tài liệu:

“W3C Document Object Model (DOM) là một giao diện trung lập về nền tảng và ngôn ngữ, cho phép chương trình và kịch bản truy cập, cập nhật nội dung, cấu trúc và樣式 của tài liệu một cách động.”

Tiêu chuẩn W3C DOM được chia thành 3 phần khác nhau:

  • Core DOM - Mô hình tiêu chuẩn của tất cả các loại tài liệu
  • XML DOM - Mô hình tiêu chuẩn của tài liệu XML
  • HTML DOM - Mô hình tiêu chuẩn của tài liệu HTML

HTML DOM là gì?

HTML DOM là tiêu chuẩn của HTMLđối tượngmô hình vàGiao diện lập trình. Nó định nghĩa:

  • làđối tượngcủa phần tử HTML
  • Tất cả các phần tử HTMLThuộc tính
  • Truy cập tất cả các phần tử HTMLPhương pháp
  • Tất cả các phần tử HTMLSự kiện

Nói cách khác: HTML DOM là tiêu chuẩn về cách lấy, thay đổi, thêm hoặc xóa các phần tử HTML.