DOM HTML là gì?
HTML DOM là một Mô hình Đối tượng cho HTML . Nó định nghĩa:
- Các phần tử HTML như các đối tượng
- Thuộc tính cho tất cả các phần tử HTML
- Phương thức cho tất cả các phần tử HTML
- Sự kiện cho tất cả các phần tử HTML
HTML DOM là một API ( Giao diện Lập trình) cho JavaScript :
- JavaScript có thể thêm / thay đổi / xóa các phần tử HTML
- JavaScript có thể thêm / thay đổi / xóa các thuộc tính HTML
- JavaScript có thể thêm / thay đổi / loại bỏ các kiểu CSS
- JavaScript có thể phản ứng với các sự kiện HTML
- JavaScript có thể thêm / thay đổi / xóa các sự kiện HTML
DOM HTML (Mô hình đối tượng tài liệu)
Khi một trang web được tải, trình duyệt sẽ tạo một đối tượng D ocument O Bject M của trang đó.
Mô hình HTML DOM được xây dựng như một cây các đối tượng :
Cây đối tượng HTML DOM
Tìm các phần tử HTML
Khi bạn muốn truy cập các phần tử HTML bằng JavaScript, trước tiên bạn phải tìm các phần tử đó.
Có một vài cách để làm điều này:
- Tìm các phần tử HTML theo id
- Tìm các phần tử HTML theo tên thẻ
- Tìm các phần tử HTML theo tên lớp
- Tìm các phần tử HTML bằng bộ chọn CSS
- Tìm các phần tử HTML bằng các bộ sưu tập đối tượng HTML
Tìm phần tử HTML theo Id
Cách dễ nhất để tìm một phần tử HTML trong DOM là sử dụng id phần tử.
Ví dụ này tìm phần tử có id = "intro":
Thí dụ
var myElement = document.getElementById("intro");
Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử dưới dạng một đối tượng (trong myElement).
Nếu phần tử không được tìm thấy, myElement sẽ chứa null.
Tìm các phần tử HTML theo tên thẻ
Ví dụ này tìm thấy tất cả các phần tử <p>:
Thí dụ
var x = document.getElementsByTagName("p");
Ví dụ này tìm phần tử có id = "main", sau đó tìm tất cả các phần tử <p> bên trong "main":
Thí dụ
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Tìm phần tử HTML theo tên lớp
Nếu bạn muốn tìm tất cả các phần tử HTML có cùng tên lớp, hãy sử dụng getElementsByClassName ().
Ví dụ này trả về danh sách tất cả các phần tử có class = "intro".
Thí dụ
var x = document.getElementsByClassName("intro");
Tìm phần tử theo tên lớp không hoạt động trong Internet Explorer 8 và các phiên bản trước đó.
Tìm các phần tử HTML bằng Bộ chọn CSS
Nếu bạn muốn tìm tất cả các phần tử HTML khớp với bộ chọn CSS được chỉ định (id, tên lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.), hãy sử dụng phương thức querySelectorAll ().
Ví dụ này trả về danh sách tất cả các phần tử <p> có class = "intro".
Thí dụ
var x = document.querySelectorAll("p.intro");
Phương thức querySelectorAll () không hoạt động trong Internet Explorer 8 và các phiên bản trước đó.
Tìm các phần tử HTML bằng Bộ sưu tập đối tượng HTML
Các bộ sưu tập đối tượng HTML cũng có thể truy cập được:
Hướng dẫn HTML DOM
Hướng dẫn đầy đủ về HTMLDOM
Đây là phần giới thiệu ngắn về HTMLDOM.
Để có hướng dẫn HTMLDOM đầy đủ, hãy truy cập Hướng dẫn HTMLDOM của W3Schools .