JavaScript HTML DOM Node Lists
Đối tượng HTML DOM NodeList
Đối tượng là một NodeListdanh sách (tập hợp) các nút được trích xuất từ một tài liệu.
Một NodeListđối tượng gần giống như một HTMLCollectionđối tượng.
Một số trình duyệt (cũ hơn) trả về đối tượng NodeList thay vì 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 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ả <p>các nút trong một tài liệu:
Thí dụ
const myNodeList = document.querySelectorAll("p");
Các phần tử trong NodeList có thể được truy cập bằng một số chỉ mục.
Để truy cập vào nút <p> thứ hai, bạn có thể viết:
myNodeList[1]
Lưu ý: Chỉ mục bắt đầu từ 0.
Độ dài danh sách nút DOM HTML
Thuộc lengthtính xác định số lượng nút trong danh sách nút:
Thí dụ
myNodelist.length
Thuộc lengthtính hữu ích khi bạn muốn lặp qua các nút trong danh sách nút:
Thí dụ
Thay đổi màu của tất cả các phần tử <p> trong danh sách nút:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Sự khác biệt giữa HTMLCollection và NodeList
An HTMLCollection(chương trước) là một tập hợp các phần tử HTML.
A NodeListlà một tập hợp các nút tài liệu.
Một NodeList và một tập hợp HTML rất giống nhau.
Cả đối tượng HTMLCollection và đối tượng NodeList đều là một danh sách (tập hợp) các đối tượng dạng mảng.
Cả hai đều có thuộc tính độ dài xác định số lượng mục trong danh sách (bộ sưu tập).
Cả hai đều cung cấp chỉ mục (0, 1, 2, 3, 4, ...) để truy cập từng mục giống như một mảng.
Các mục trong bộ sưu tập HTMLC 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.
Chỉ đối tượng NodeList mới có thể chứa các nút thuộc tính và nút văn bản.
Danh sách nút không phải là một mảng!
Danh sách nút có thể trông giống như một mảng, nhưng không phải vậy.
Bạn có thể lặp qua danh sách nút và tham chiếu đến các nút của nó giống như một mảng.
Tuy nhiên, bạn không thể sử dụng các Phương thức Mảng, như valueOf (), push (), pop () hoặc join () trên danh sách nút.