Cấu trúc của DOM
DOM biểu diễn tài liệu XML hoặc HTML dưới dạng cây. Trang này giới thiệu cấu trúc cơ bản của cây DOM và các thuộc tính và phương thức khác nhau được sử dụng để điều hướng nó.
Để bắt đầu, chúng ta cần giới thiệu một số khái niệm liên quan đến cây. Cây là cấu trúc dữ liệu được tạo thành từ các nút. Mỗi nút chứa một số dữ liệu. Các nút được tổ chức theo cách phân cấp: mỗi nút có một nút cha duy nhất (ngoại trừ nút gốc, không có cha) và một danh sách được sắp xếp gồm không hoặc nhiều nút con. Bây giờ chúng ta có thể định nghĩa:
- Nút không có cha được gọi là gốc của cây.
- Nút không có con được gọi là lá.
- Các nút chia sẻ cùng cha được gọi là anh em.
- Nếu chúng ta có thể đi từ nút A đến nút B bằng cách liên tục theo các liên kết cha, thì A là hậu duệ của B và B là tổ tiên của A.
- Các nút trong cây được liệt kê theo thứ tự cây bằng cách đầu tiên liệt kê bản thân nút, sau đó liệt kê đệ quy từng nút con theo thứ tự (duyệt trước, theo chiều sâu).
Giao diện Node và các lớp con của nó
Tất cả các nút trong DOM được đại diện bởi các đối tượng thực hiện giao diện Node. Giao diện Node bao gồm nhiều khái niệm đã định nghĩa trước đó:
- Thuộc tính
parentNodetrả về nút cha, hoặcnullnếu nút không có cha. - Thuộc tính
childNodestrả vềNodeListcủa các nút con. - Phương thức
getRootNode()trả về gốc của cây chứa nút. - Phương thức
hasChildNodes()trả vềtruenếu nó có bất kỳ nút con nào. - Thuộc tính
previousSiblingvànextSiblingtrả về các nút anh em trước và sau. - Phương thức
contains()trả vềtruenếu một nút nhất định là hậu duệ của nút.
Bạn hiếm khi làm việc với các đối tượng Node thuần túy mà thay vào đó, tất cả các đối tượng trong DOM thực hiện một trong các giao diện kế thừa từ Node.
Các loại nút
Nút Document
Trong tài liệu HTML, gốc của cây là một đối tượng Document. Tất cả các nút khác trong DOM là hậu duệ của nút Document.
Nút Element
Nút Element đại diện cho phần tử trong tài liệu, chẳng hạn như thẻ HTML. Các phần tử là loại nút phổ biến nhất bạn sẽ làm việc trong DOM.
Nút Text
Nút Text đại diện cho nội dung văn bản trong tài liệu. Nút văn bản luôn là lá, nghĩa là chúng không có con.
Nút Attr
Nút Attr đại diện cho thuộc tính của phần tử. Các nút Attr không phải là con của phần tử mà thuộc về phần tử.
Nút Comment
Nút Comment đại diện cho chú thích trong HTML.
Điều hướng cây DOM
Khi làm việc với DOM, bạn thường cần di chuyển từ nút này sang nút khác. DOM cung cấp một số thuộc tính và phương thức để điều hướng cây:
Điều hướng cha
Bạn có thể điều hướng lên cây bằng cách sử dụng thuộc tính Node.parentNode và Node.parentElement.
Điều hướng con
Bạn có thể điều hướng xuống cây bằng cách sử dụng Node.firstChild, Node.lastChild, Node.childNodes, Element.firstElementChild, và Element.lastElementChild.
Điều hướng anh em
Bạn có thể điều hướng ngang cây bằng cách sử dụng Node.previousSibling, Node.nextSibling, Element.previousElementSibling và Element.nextElementSibling.