Danh sách nút DOM HTML HTML
Đối tượng danh sách nút HTML DOM
Đố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.
Đối tượng NodeList gần giống như đối tượng HTMLCollection .
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 đều trả về đố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ả các nút <p> trong tài liệu:
Ví dụ
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ử » 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.
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 khảo các nút của nó theo chỉ mục.
Tuy nhiên, bạn không thể sử dụng các phương thức Array như push(), pop() hoặc join() trên NodeList.
