JavaScript - Điều hướng DOM

Xin chào các nhà pháp sư JavaScript tương lai! ? Bạn đã sẵn sàng bắt đầu một hành trình thú vị qua thế giới kỳ diệu của điều hướng DOM chưa? Là giáo viên khoa học máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn trong cuộc phiêu lưu này. Nào, lấy compass ảo của bạn, và chúng ta cùng bắt đầu khám phá nhé!

JavaScript - DOM Navigation

Nodes là gì?

Hãy tưởng tượng DOM (Document Object Model) như một cây gia đình cho trang web của bạn. Mỗi phần tử trong cây này được gọi là một node. Giống như trong một gia đình thực sự, các node này có mối quan hệ với nhau - cha mẹ, con cái và anh chị em. Đúng là rất thú vị phải không?

Hãy xem một ví dụ đơn giản:

<html>
<head>
<title>Trang web tuyệt vời của tôi</title>
</head>
<body>
<h1>Chào mừng!</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>

Trong gia đình này, phần tử <html> là tổ tiên lớn, <head> và <body> là con của nó, và cứ thế. Mỗi phần tử này là một node trong cây DOM của chúng ta.

Mối quan hệ giữa các Nodes DOM

Bây giờ chúng ta đã hiểu nodes là gì, hãy cùng khám phá cách chúng liên quan với nhau. Trong cây gia đình DOM của chúng ta:

Nodes cha có con
Con cái có cha
Anh chị em là nodes có cùng cha

Ví dụ, trong HTML trước đó:

<html> là cha của <head> và <body>
<head> và <body> là anh chị em
<h1> và <p> là con của <body>

Điều hướng giữa các Nodes bằng JavaScript

Đã đến lúc戴上 mũ thám hiểm của chúng ta! ? JavaScript cung cấp cho chúng ta một số công cụ tuyệt vời để điều hướng giữa các nodes. Hãy cùng lặn sâu vào!

Truy cập phần tử con đầu tiên

Để lấy phần tử con đầu tiên của một phần tử, chúng ta sử dụng thuộc tính firstElementChild. Dưới đây là cách làm:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Output: H1

Trong ví dụ này, chúng ta đang tìm phần tử con đầu tiên của thẻ <body>, đó là phần tử <h1>.

Truy cập phần tử con cuối cùng

Tương tự, chúng ta có thể tìm phần tử con cuối cùng bằng cách sử dụng lastElementChild:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Output: P

Ở đây, chúng ta đang lấy phần tử con cuối cùng của <body>, đó là phần tử <p>.

Truy cập tất cả các phần tử con của một phần tử HTML

Muốn xem tất cả các phần tử con? Sử dụng children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Output:
// H1
// P

Mã này vòng qua tất cả các phần tử con của <body> và ghi lại tên thẻ của chúng.

Truy cập node cha của một phần tử HTML

Để tìm node cha của một phần tử, chúng ta sử dụng parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Output: BODY

Ở đây, chúng ta đang tìm node cha của phần tử <h1>, đó là <body>.

Truy cập node anh chị em tiếp theo

Để tìm node anh chị em tiếp theo, sử dụng nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Output: P

Mã này tìm node anh chị em tiếp theo sau <h1>, đó là phần tử <p>.

Truy cập node anh chị em trước

Và để tìm node anh chị em trước, sử dụng previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Output: H1

Ở đây, chúng ta đang tìm node anh chị em trước <p>, đó là phần tử <h1>.

Nodes gốc DOM

Mỗi cây gia đình đều có gốc, và trong DOM, chúng ta có ba gốc chính:

document.documentElement - Phần tử gốc (thường là <html>)
document.head - Phần tử <head>
document.body - Phần tử <body>

console.log(document.documentElement.tagName); // Output: HTML
console.log(document.head.tagName); // Output: HEAD
console.log(document.body.tagName); // Output: BODY

Thuộc tính nodeName của DOM

Mỗi node đều có một tên, mà chúng ta có thể truy cập bằng thuộc tính nodeName:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Output: H1

Thuộc tính nodeValue của DOM

Thuộc tính nodeValue cung cấp giá trị của node. Đối với các node văn bản, đây là nội dung văn bản:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Output: Chào mừng!

Các loại Nodes trong DOM

Không phải tất cả các nodes đều được tạo ra như nhau! Có các loại nodes khác nhau trong DOM. Dưới đây là các loại chính:

Loại Node	Mô tả	Giá trị nodeType
Element Node	Bất kỳ phần tử HTML nào (như `<p>`, `<div>`, v.v.)	1
Attribute Node	Một thuộc tính của phần tử HTML	2
Text Node	Văn bản bên trong một phần tử HTML	3
Comment Node	Một comment HTML	8
Document Node	Toàn bộ tài liệu	9

Thuộc tính nodeType của DOM

Chúng ta có thể sử dụng thuộc tính nodeType để xác định loại node chúng ta đang đối phó:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('This is a comment');

console.log(element.nodeType); // Output: 1 (Element Node)
console.log(textNode.nodeType); // Output: 3 (Text Node)
console.log(commentNode.nodeType); // Output: 8 (Comment Node)

Và thế là bạn đã điều hướng qua DOM như một chuyên gia. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Trước khi bạn biết, bạn sẽ điều hướng cây DOM nhanh hơn một sóc trong nhà máy hạt dẻ! ?️

Chúc bạn vui vẻ với mã code, và may mắn với DOM! ?

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Hoạt ảnh DOM

Hướng Dẫn Tiếp Theo:

JavaScript - Bộ sưu tập DOM