Tìm hiểu về DOM - Document Object Model(p4-Làm thế nào để Traverse DOM)

Giới thiệu

Hướng dẫn trước trong loạt bài này, Cách truy cập các phần tử trong DOM, bao gồm cách sử dụng các phương thức dựng sẵn của đối tượng tài liệu để truy cập các phần tử HTML theo ID, class, tag name, and query selectors. Chúng ta biết rằng DOM được cấu trúc như một cây các nút với nút tài liệu ở gốc và mọi nút khác (bao gồm các phần tử, các chú thích và các nút văn bản) như các nhánh khác nhau.

Thông thường, bạn sẽ muốn di chuyển qua DOM mà không chỉ rõ từng phần tử trước. Tìm hiểu cách điều hướng lên và xuống cây DOM và di chuyển từ nhánh này sang nhánh khác là điều cần thiết để hiểu cách làm việc với JavaScript và HTML.

Trong hướng dẫn này, chúng ta sẽ xem xét cách duyệt qua DOM (còn được gọi là đi bộ hoặc điều hướng DOM) với các thuộc tính parent, child, and sibling.

Thiết lập

Để bắt đầu, chúng tôi sẽ tạo một tệp mới có tên nodes.html bao gồm mã sau.

nodes.html

Learning About Nodes

Shark World

The world's leading source on shark related information.

Types of Sharks

• Hammerhead
• Tiger
• Great White

Trong trang web ví dụ này, chúng tôi có một tài liệu HTML với một vài yếu tố. Một số CSS cơ bản đã được thêm vào trong một thẻ kiểu để làm cho mỗi phần tử hiển thị rõ ràng, và một vài biến đã được tạo trong kịch bản để dễ truy cập một vài phần tử. Vì chỉ có một trong mỗi h1, p và ul, chúng ta có thể truy cập chỉ mục đầu tiên trên mỗi thuộc tính getElementsByTagName tương ứng.

Các node gốc

Đối tượng tài liệu là gốc của mọi nút trong DOM. Đối tượng này thực sự là một thuộc tính của đối tượng cửa sổ, là đối tượng cấp cao nhất, toàn cục đại diện cho một tab trong trình duyệt. Đối tượng cửa sổ có quyền truy cập vào thông tin như thanh công cụ, chiều cao và chiều rộng của cửa sổ, lời nhắc và cảnh báo. Tài liệu bao gồm những gì nằm bên trong cửa sổ bên trong.

Dưới đây là một biểu đồ bao gồm các phần tử gốc mà mọi tài liệu sẽ chứa. Ngay cả khi một tệp HTML trống được tải vào trình duyệt, ba nút này sẽ được thêm và phân tích cú pháp vào DOM.

Vì các phần tử html, head và body rất phổ biến nên chúng có các thuộc tính riêng của chúng trên tài liệu.

Mở Console trong DevTools và kiểm tra từng thuộc tính trong số bốn thuộc tính này bằng cách gửi chúng và xem đầu ra. Bạn cũng có thể kiểm tra h1, p và ul để trả về các phần tử do các biến chúng tôi đã thêm vào trong thẻ script.

Các node cha.

Trong ví dụ nodes.html của chúng tôi:

• html là parent của head, body, và script.

• body là parent của h1, h2, p và ul, nhưng không li, vì li là 2 cấp độ từ body.

Chúng ta có thể kiểm tra phần tử parent của phần tử p của chúng ta là gì với thuộc tính parentNode. Biến p này xuất phát từ khai báo document.getElementsByTagName ('p') [0] tùy chỉnh của chúng tôi. 

p.parentNode;

Output
► 

...

// Assign html object to html variable
const html = document.documentElement;

console.log(html.parentNode); // > #document
console.log(html.parentElement); // > null

The parent của nút gần như bất kỳ là nút phần tử, vì văn bản và nhận xét không thể là parent của các nút khác. Tuy nhiên, parent của html là một nút tài liệu, vì vậy parentElement trả về null. Nói chung, parentNode thường được sử dụng khi duyệt qua DOM.

Các node con

Các con của một nút là các nút ở dưới một mức. Bất kỳ nút nào vượt quá một mức làm tổ thường được gọi là con cháu.

ul.childNodes;

Output
► (7) [text, li, text, li, text, li, text]

ul.firstChild.style.background = 'yellow';

Output
Uncaught TypeError: Cannot set property 'background' of undefined

ul.firstElementChild.style.background = 'yellow';

for (let element of ul.children) {
  element.style.background = 'yellow';
}

for (let element of p.childNodes) {
  console.log(element);
}

Output
"The world's leading source on "
​shark​​
" related information."

document.body.children[3].lastElementChild.style.background = 'fuchsia';

const tiger = ul.children[1];

tiger.nextElementSibling.style.background = 'coral';
tiger.previousElementSibling.style.background = 'aquamarine';