HTML DOM là một mô hình đối tượng cho HTML. Nó định nghĩa:HTML DOM is an Object Model for HTML. It defines:
- Các phần tử HTML làm đối tượngobjects
- Thuộc tính cho tất cả các phần tử HTML for all HTML elements
- Phương pháp cho tất cả các phần tử HTML for all HTML elements
- Các sự kiện cho tất cả các yếu tố HTML for all HTML elements
HTML DOM là API (giao diện lập trình) cho JavaScript:HTML DOM is an API (Programming Interface) for 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/xóa 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
HTML DOM (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 mô hình đối tượng tài liệu của trang.Document Object Model of the page.
Mô hình HTML DOM được xây dựng như một cây của các đối tượng:HTML DOM model is constructed as a tree of Objects:
Cây HTML DOM của các đối tượng
Tìm các yếu tố HTML
Khi bạn muốn truy cập các phần tử HTML với JavaScript, bạn phải tìm các phần tử trước.
Có một vài cách để làm điều này:
- Tìm các phần tử HTML bằng 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 của bộ chọn CSS
- Tìm các phần tử HTML bằng bộ sưu tập đối tượng HTML
Tìm phần tử HTML bằng ID
Cách dễ nhất để tìm một phần tử HTML trong DOM, là bằng cách sử dụng ID phần tử.
Ví dụ này tìm phần tử với id = "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 đố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 yếu tố:
Ví dụ này tìm ra phần tử có id = "chính", và sau đó tìm tất cả các phần tử bên trong "chính":
Thí dụ
var x = document.getEuityById ("main"); var y = x.getElementsByTagName ("p");
var y = x.getElementsByTagName("p");
Hãy tự mình thử »
Tìm các 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 getElsementsByClassName ().
Ví dụ này trả về một danh sách tất cả các yếu tố có lớp = "giới thiệu".
Tìm các yếu tố theo tên lớp không hoạt động trong Internet Explorer 8 trở lên.
Tìm các phần tử HTML của 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ề một danh sách tất cả các yếu tố có lớp = "giới thiệu".
Phương thức QuerySelectorall () không hoạt động trong các phiên bản Internet Explorer 8 trở lên.
Tìm các phần tử HTML bằng bộ sưu tập đối tượng HTML
Bộ sưu tập đối tượng HTML cũng có thể truy cập được:
- document.anchors
- document.forms
- document.images
- document.links
- document.scripts
Hướng dẫn HTML DOM
Hướng dẫn đầy đủ HTMLDOM
Đây là một giới thiệu ngắn về HTMLDOM.
Đối với một hướng dẫn HTMLDOM đầy đủ, hãy truy cập hướng dẫn của W3Schools HTMLDOM.
Các phương thức HTML DOM là những hành động bạn có thể thực hiện (trên các phần tử HTML).actions you can perform (on HTML Elements).
Các thuộc tính HTML DOM là các giá trị (của các phần tử HTML) mà bạn có thể đặt hoặc thay đổi.values (of HTML Elements) that you can set or change.
Giao diện lập trình DOM
HTML DOM có thể được truy cập bằng JavaScript (và với các ngôn ngữ lập trình khác).
Trong DOM, tất cả các phần tử HTML được định nghĩa là đối tượng.objects.
Giao diện lập trình là các thuộc tính và phương thức của từng đối tượng.
Thuộc tính là một giá trị mà bạn có thể nhận được hoặc đặt (như thay đổi nội dung của phần tử HTML).property is a value that you can get or set (like changing the content of an HTML element).
Phương thức là một hành động bạn có thể làm (như thêm hoặc xóa phần tử HTML).method is an action you can do (like add or deleting an HTML element).
Thí dụ
Ví dụ sau đây thay đổi nội dung (innerHTML) của phần tử <p> với id="demo":
Thí dụ
Ví dụ sau đây thay đổi nội dung (innerHTML) của phần tử <p> với id="demo":
Ví dụ sau đây thay đổi nội dung (innerHTML) của phần tử <p> với id="demo":
Hãy tự mình thử »
document.getElementById("demo").innerHTML = "Hello
World!";
Document.getEuityById ("Demo"). Internhtml = "Hello World!";
Hãy tự mình thử »
Hãy tự mình thử »method, while innerHTML is a property.
Trong ví dụ trên, getElementById là một phương thức, trong khi innerHTML là một thuộc tính.
Phương pháp getEuityByid
Cách phổ biến nhất để truy cập một phần tử HTML là sử dụng id của phần tử.
Trong ví dụ trên phương thức getElementById được sử dụng id="demo" để tìm phần tử.
Thuộc tính bên trong
Cách dễ nhất để có được nội dung của một phần tử là sử dụng thuộc tính innerHTML.
Thuộc tính innerHTML rất hữu ích để nhận hoặc thay thế nội dung của các phần tử HTML.