JavaScript: NodeList
Tổng quan
NodeList là một đối tượng chứa một danh sách các phần tử kiểu node. Các phần tử này có thể được lấy từ cây DOM thông qua các phương thức như querySelectorAll hoặc childNodes.
Lưu ý: Mặc dù NodeList không phải là Array, nhưng có thể lặp lại nó bằng forEach(). Nó cũng có thể được chuyển đổi thành tệp thực tế Array bằng cách sử dụng Array.from().
Live và Static NodeList
Live NodeList
Một NodeList là dạng NodeList sẽ tự động cập nhật theo những thay đổi trong DOM. Nghĩa là những thay đổi trong DOM sẽ tự động cập nhật bộ sưu tập. Node.childNodes trả về một live NodeList.
const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // giả sử là "2"
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // output "3"
Trong ví dụ trên, chúng ta tạo một phần tử parent thông qua document.getElementById("parent"). Sau đó, chúng ta lấy danh sách các nút con của parent bằng cách sử dụng childNodes và lưu vào biến childNodes. Lúc này, childNodes đang giữ một live NodeList chứa các nút con của phần tử parent. Tiếp theo, chúng ta in ra độ dài của childNodes (số lượng nút con) bằng console.log(childNodes.length). Ở đây, chúng ta giả định rằng ban đầu có "2" nút con. Sau đó, chúng ta thêm một phần tử div làm con mới cho parent thông qua parent.appendChild(document.createElement("div")). Điều đáng chú ý là, dù chúng ta thay đổi cấu trúc của parent, childNodes vẫn giữ nguyên live NodeList, tự động cập nhật khi có thay đổi trong cây DOM. Cuối cùng, chúng ta in ra độ dài của childNodes một lần nữa. Kết quả sẽ là "3", thể hiện rằng live NodeList đã cập nhật để bao gồm phần tử div mới được thêm vào.
Static NodeList
Một NodeList là static NodeList là khi mọi thay đổi trong DOM không ảnh hưởng đến nội dung của bộ sưu tập. Phương thức phổ biến document.querySelectorAll() trả về một static NodeList .
// Lấy danh sách các phần tử <li> ban đầu
const listItems = document.querySelectorAll('#myList li');
// Hiển thị số lượng phần tử ban đầu
console.log(listItems.length); // giả sự kết quả là 3
// Thêm một phần tử mới vào #myList
const newListElement = document.createElement('li');
newListElement.textContent = 'Item 4';
document.getElementById('myList').appendChild(newListElement);
// Hiển thị số lượng phần tử sau khi thêm
console.log(listItems.length); // Kết quả vẫn là 3, không tự động cập nhật
Các phương thức
NodeList.item()
Trả về một mục trong danh sách theo chỉ mục của nó hoặc null nếu chỉ mục nằm ngoài giới hạn.
Một cách thay thế cho việc truy cập nodeList[i] (thay vào đó sẽ trả về undefined khi ivượt quá giới hạn). Điều này chủ yếu hữu ích cho việc triển khai DOM không phải JavaScript.
NodeList.entries()
Trả về một iterator, cho phép mã đi qua tất cả các cặp khóa/giá trị (key/value) có trong bộ sưu tập. (Trong trường hợp này, khóa là số nguyên bắt đầu từ đó 0 và giá trị là nút).
NodeList.forEach()
Thực thi hàm được cung cấp một lần cho mỗi phần tử NodeList, chuyển phần tử đó làm đối số cho hàm.
NodeList.keys()
Trả về một iterator, cho phép mã đi qua tất cả các khóa của cặp khóa/giá trị có trong bộ sưu tập. (Trong trường hợp này, các khóa là số nguyên bắt đầu từ 0.)
NodeList.values()
Trả về iteratormã cho phép đi qua tất cả các giá trị (nút) của cặp khóa/giá trị có trong bộ sưu tập.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList Methods Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// Lấy danh sách các phần tử <li>
const listItems = document.querySelectorAll('#myList li');
// Sử dụng NodeList.item() để truy cập phần tử tại chỉ mục 1
const secondItem = listItems.item(1);
console.log(secondItem.textContent); // Kết quả: "Item 2"
// Sử dụng NodeList.entries() để duyệt qua các cặp khóa/giá trị
for (const [index, listItem] of listItems.entries()) {
console.log(`Item ${index + 1}: ${listItem.textContent}`);
}
// Sử dụng NodeList.forEach() để thực thi hàm cho mỗi phần tử
listItems.forEach((listItem, index) => {
console.log(`Item ${index + 1}: ${listItem.textContent}`);
});
// Sử dụng NodeList.keys() để duyệt qua các khóa của cặp khóa/giá trị
const keysIterator = listItems.keys();
for (const index of keysIterator) {
console.log(`Key: ${index}`);
}
// Sử dụng NodeList.values() để duyệt qua các giá trị của cặp khóa/giá trị
const valuesIterator = listItems.values();
for (const listItem of valuesIterator) {
console.log(`Value: ${listItem.textContent}`);
}
</script>
</body>
</html>
So sánh HtmlCollection và NodeList
NodeList và HTMLcollection rất giống nhau.
- Cả hai đều là các tập hợp (danh sách) dạng mảng gồm các nút (phần tử) được trích xuất từ một tài liệu. Các nút có thể được truy cập bằng số chỉ mục với chỉ số bắt đầu từ 0.
- Cả hai đều có thuộc tính length trả về số phần tử trong danh sách (bộ sưu tập).
- HTMLCollection là một tập hợp các document element.
- NodeList là một tập hợp các element node (element nodes, attribute nodes, và text nodes)
- Các phần tử HTMLCollection có thể được truy cập bằng tên, id hoặc số chỉ mục của chúng.
- Các mục NodeList chỉ có thể được truy cập bằng số chỉ mục của chúng.
- HTMLCollection luôn là một live collection. Ví dụ: Nếu bạn thêm <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.
- NodeList thường là một static collection. Ví dụ: Nếu bạn thêm <li> phần tử vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.
- Các phương thức getElementsByClassName() và getElementsByTagName() trả về một live HtmlCollection.
- Phương thức querySelectorAll() trả về một static NodeList.
- Thuộc tính childNodes trả về một live NodeList.