JavaScript HTML DOM

Qua HTML DOM, JavaScript có thể truy cập và thay đổi tất cả các phần tử của tài liệu HTML.

HTML DOM（文档对象模型）

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

Bằng cách 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 phần 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 phần tử và thuộc tính HTML đã có
  • JavaScript có thể thêm các phần 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:

  • Làm thế nào để thay đổi nội dung của phần tử HTML
  • Cách thay đổi kiểu CSS của phần tử HTML
  • Cách phản hồi sự kiện của HTML DOM
  • Cách thêm và xóa các 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ữ, nó 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à樣 thức 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
  • Của 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
  • Của 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.