Các danh sách Node trong JavaScript HTML DOM

Đối tượng NodeList trong HTML DOM

Một đối tượng NodeList là một danh sách (tập hợp) các nút được trích xuất từ một tài liệu. Một đối tượng NodeList hầu như giống như một đối tượng HTMLCollection.

Một số trình duyệt (cũ) trả lại một đối tượng NodeList thay vì một HTMLCollection cho các phương thức như getElementsByClassName().

Tất cả các trình duyệt trả về một đối tượng NodeList cho các thuộc tính childNodes. Hầu hết các trình duyệt trả về một đối tượng NodeList cho phương thức querySelectorAll().

Đoạn mã sau chọn tất cả các node <p> trong một tài liệu:

var myNodeList = document.querySelectorAll(“p”);

Các phần tử trong NodeList có thể được truy cập bởi một số chỉ mục. Để truy cập node <p> thứ hai bạn có thể viết:

y = myNodeList[1];

Lưu ý: chỉ mục bắt đầu từ 0.

Độ dài danh sách node HTML DOM

Thuộc tính length xác định số node trong một danh sách node:

var myNodelist = document.querySelectorAll(“p”);
document.getElementById(“demo”).innerHTML = myNodelist.length;

Giải thích ví dụ:

1. Tạo một danh sách tất cả các phần tử <p>
2. Hiển thị chiều dài của danh sách

Thuộc tính length hữu ích khi bạn muốn lặp qua các node trong một danh sách node. Ví dụ thay đổi màu nền của tất cả các phần tử <p> trong một danh sách node:

var myNodelist = document.querySelectorAll(“p”);
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = “red”;
}

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

Một HTMLCollection là một tập hợp các phần tử HTML. Một NodeList là một tập hợp các node tài liệu. Trong nhiều trường hợp, hai đối tượng này rất giống nhau.

Cả hai đối tượng HTMLCollection và NodeList là một danh sách giống như mảng (collection) các đối tượng. Cả hai đều có thuộc tính chiều dài xác định số lượng mục trong danh sách. Cả hai đều cung cấp một chỉ mục (0, 1, 2, 3, 4, …) để truy cập vào từng mục như một mảng.

Các mục HTMLCollection có thể được truy cập theo tên, id hoặc số thứ tự của chúng.

Các mục NodeList chỉ có thể được truy cập bởi số chỉ mục của chúng.

Chỉ đối tượng NodeList có thể chứa các node thuộc tính và văn bản.

Một danh sách node trông có vẻ giống nhưng không phải là một mảng. Bạn có thể lặp lại danh sách node và xem các node của nó như một mảng. Tuy nhiên, bạn không thể sử dụng phương thức mảng như valueOf(), push(), pop(), hoặc join() trên một danh sách node.