Danh sách nút DOM HTML
Danh sách nút
NodeList là một tập hợp (danh sách) các Đối tượng Nút giống như mảng.
Các nút trong NodeList có thể được truy cập theo chỉ mục (bắt đầu từ 0).
Thuộc tính độ dài trả về số lượng nút trong NodeList.
NodeList so với HTMLCollection
NodeList gần giống như HTMLCollection .
Xem mô tả bên dưới.
Ai trả về NodeList?
Thuộc tính và phương thức
Các thuộc tính và phương thức sau có thể được sử dụng trên NodeList:
Name | Description |
---|---|
entries() | Returns an Iterator with the key/value pairs from the list |
forEach() | Executes a callback function for each node in the list |
item() | Returns the node at a specified index |
keys() | Returns an Iterator with the keys from the list |
length | Returns the number of nodes in a NodeList |
values() | Returns an Iterator with the values from the list |
Ví dụ
Chọn tất cả các nút <p>
trong tài liệu:
const myNodeList = document.querySelectorAll("p");
Các phần tử trong NodeList có thể được truy cập bằng số chỉ mục.
Để truy cập nút <p> thứ hai, bạn có thể viết:
myNodeList[1]
Hãy tự mình thử »Lưu ý: Chỉ số bắt đầu từ 0.
Độ dài danh sách nút HTML DOM
Thuộc tính length
xác định số lượng nút trong danh sách nút:
Thuộc tính length
rất hữu ích khi bạn muốn lặp qua các nút trong danh sách nút:
Ví 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";
}
Hãy tự mình thử » Không phải là một mảng
NodeList không phải là một mảng!
NodeList có thể trông giống như một mảng, nhưng thực tế không phải vậy.
Bạn có thể lặp qua NodeList và tham chiếu đến các nút của nó bằng một chỉ mục.
Nhưng bạn không thể sử dụng các phương thức Array như push(), pop() hoặc join() trên NodeList.
Sự khác biệt giữa HTMLCollection và NodeList
NodeList và HTMLcollection rất giống nhau.
Cả hai đều là các bộ sưu tậ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. Chỉ số bắt đầu từ 0.
Cả hai đều có thuộc tính độ dài trả về số phần tử trong danh sách (bộ sưu tập).
HTMLCollection là tập hợp các phần tử tài liệu .
NodeList là một tập hợp các nút tài liệu (nút phần tử, nút thuộc tính và nút văn bản).
Các mục 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 bộ sưu tập trực tiếp . Ví dụ: Nếu bạn thêm phần tử <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.
NodeList thường là một bộ sưu tập tĩnh . Ví dụ: Nếu bạn thêm phần tử <li> 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 HTMLCollection trực tiếp.
Phương thức querySelectorAll()
trả về một NodeList tĩnh.
Thuộc tính childNodes
trả về một NodeList trực tiếp.
Danh sách nút trực tiếp
Trong một số trường hợp, NodeList đang hoạt động : Một thay đổi trong DOM sẽ cập nhật NodeList.
Phương thức childNodes
trả về một NodeList trực tiếp.