JavaScript - Danh sách Node DOM

Giới thiệu về Danh sách Node DOM

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của JavaScript DOM Node Lists. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có khả năng manipulates các trang web như một chuyên gia!

JavaScript - DOM Node Lists

Danh sách Node DOM là gì?

Trước khi chúng ta bắt đầu, hãy bắt đầu từ những điều cơ bản. Hãy tưởng tượng một trang web như một cây gia đình. DOM (Document Object Model) giống như cây gia đình đó cho các trang web. Mỗi phần tử trên trang - có thể là một đoạn văn, một nút hoặc một hình ảnh - là một thành viên của gia đình này, hoặc theo thuật ngữ kỹ thuật, một "node."

Danh sách Node là một bộ sưu tập các node này. Nó giống như việc bạn có một danh sách khách tham dự một buổi tiệc, nơi mỗi khách là một phần tử từ trang web của bạn.

Ví dụ 1: Lấy một danh sách Node

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

<div>
<p>Đoạn văn 1</p>
<p>Đoạn văn 2</p>
<p>Đoạn văn 3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

Trong ví dụ này, querySelectorAll('p') trả về một danh sách Node chứa tất cả các phần tử <p>. Nếu bạn chạy đoạn mã này trong console của trình duyệt, bạn sẽ thấy điều gì đó như sau:

NodeList(3) [p, p, p]

Điều này cho biết chúng ta có một danh sách Node chứa ba đoạn văn bản.

Làm việc với danh sách Node

Bây giờ chúng ta đã có danh sách Node, hãy xem chúng ta có thể làm gì với nó!

Ví dụ 2: Lặp qua danh sách Node

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`Đoạn văn ${index + 1}: ${paragraph.textContent}`);
});

Đoạn mã này sẽ xuất ra:

Đoạn văn 1: Đoạn văn 1
Đoạn văn 2: Đoạn văn 2
Đoạn văn 3: Đoạn văn 3

Ở đây, chúng ta sử dụng phương thức forEach để lặp qua mỗi đoạn văn trong danh sách Node. Nó giống như việc bạn đi qua danh sách khách tham dự tiệc và chào đón từng khách một!

Phép màu của danh sách Live và Static

Bây giờ, hãy đi sâu hơn một chút. Danh sách Node có thể là "live" hoặc "static."

Một danh sách Node live giống như một danh sách khách tham dự ma thuật tự động cập nhật khi người đến hoặc rời khỏi tiệc. Ngược lại, một danh sách Node static giống như một bức ảnh của danh sách khách tham dự tại một thời điểm cụ thể - nó không thay đổi ngay cả khi có khách mới đến.

Ví dụ 3: Danh sách Node Live

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // Xuất: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Xuất: 3
</script>

Trong ví dụ này, getElementsByTagName trả về một danh sách Node live. Khi chúng ta thêm Charlie vào danh sách, danh sách guests tự động cập nhật!

Ví dụ 4: Danh sách Node Static

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // Xuất: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Vẫn xuất: 2
</script>

Ở đây, querySelectorAll trả về một danh sách Node static. Dù chúng ta thêm Charlie, danh sách guests không thay đổi. Nó giống như chúng ta đã chụp một bức ảnh của danh sách khách tham dự và bức ảnh đó không cập nhật khi có khách mới đến.

Sự khác biệt giữa HTMLCollection và NodeList

Bây giờ, hãy nói về hai người thân trong gia đình DOM: HTMLCollection và NodeList. Chúng tương tự, nhưng chúng có những đặc điểm riêng biệt.

HTMLCollection

An HTMLCollection luôn live. Nó giống như một danh sách khách tham dự ma thuật luôn cập nhật.

let divs = document.getElementsByTagName('div'); // Trả về HTMLCollection

NodeList

Một NodeList có thể là live hoặc static, tùy thuộc vào cách nó được tạo ra.

let paragraphs = document.querySelectorAll('p'); // Trả về NodeList static
let childNodes = document.body.childNodes; // Trả về NodeList live

Dưới đây là bảng tóm tắt sự khác biệt của chúng:

Tính năng	HTMLCollection	NodeList
Live/Static	Luôn live	Có thể live hoặc static
Nội dung	Chỉ các node phần tử	Có thể bao gồm tất cả các loại node
Truy cập các mục	Bằng tên, id hoặc chỉ số	Chỉ bằng chỉ số
Phương thức forEach	Không có	Có

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của DOM Node Lists, từ khái niệm cơ bản đến những细微差别 của danh sách live và static. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo. Thử nghiệm các ví dụ này, thực hành với chúng, và sớm bạn sẽ có khả năng manipulates các trang web như một nhà phát triển có kinh nghiệm!

Trước khi chúng ta chia tay, đây là một câu đùa cho các nhà phát triển web: Tại sao nhà phát triển JavaScript đeo kính? Vì anh ấy không thể C#! (Hiểu không? C Sharp? Nếu không, tôi sẽ ra ngoàilaughs... )

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy tiếp tục vui vẻ với JavaScript!

Credits: Image by storyset

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

JavaScript - Bộ sưu tập DOM

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

JavaScript - Ajax