HTML DOM NodeList Hướng dẫn tham khảo

NodeList

NodeList là bộ sưu tập các đối tượng nút tương tự như mảng (danh sách).

Các nút trong NodeList có thể được truy cập qua chỉ số (bắt đầu từ 0).

Thuộc tính lengthTrả về số lượng các nút trong NodeList.

NodeList vs. HTMLCollection

NodeList với HTMLCollection Gần như giống nhau.

Xin xem hướng dẫn bên dưới của trang.

Ai trả về NodeList?

Thuộc tính childNodes

Phương thức querySelectorAll()

Phương thức getElementsByName()

Thuộc tính và phương thức

Bạn có thể sử dụng các thuộc tính và phương thức sau trên NodeList:

Tên Mô tả
entries() Trả về bộ duyệt có chứa cặp khóa/giá trị từ danh sách.
forEach() Thực hiện hàm callback cho mỗi nút trong danh sách.
item() Trả về nút tại chỉ số xác định.
keys() Trả về bộ duyệt bằng cách sử dụng khóa trong danh sách.
length Trả về số lượng các nút trong NodeList.
values() Trả về bộ duyệt bằng cách sử dụng giá trị trong danh sách.

thực thể

Chọn tất cả các phần tử <p> Nút:

const myNodeList = document.querySelectorAll("p");

Các yếu tố trong NodeList có thể được truy cập qua chỉ số.

Nếu bạn muốn truy cập vào yếu tố <p> thứ hai, bạn có thể viết:

myNodeList[1]

Thử trực tiếp

Lưu ý:Chỉ số bắt đầu từ 0.

HTML DOM Node List Length

length Thuộc tính định nghĩa số lượng các nút trong danh sách các nút:

Ví dụ 1

myNodelist.length

Thử trực tiếp

Khi bạn muốn duyệt qua các nút trong danh sách các nút:length Thuộc tính rất hữu ích:

Ví dụ 2

Thay đổi màu sắc của tất cả các yếu tố <p> trong danh sách các nút:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Thử trực tiếp

Không phải là mảng

NodeList không phải là mảng!

NodeList có thể trông giống như một mảng, nhưng thực tế không phải như vậy.

Bạn có thể duyệt NodeList và sử dụng chỉ số để tham chiếu đến các điểm của nó.

Nhưng bạn không thể sử dụng các phương pháp mảng trên NodeList, như push()、pop() hoặc join().

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

NodeList và HTMLcollection Rất giống nhau.

Cả hai đều là bộ sưu tập các điểm (element) được lấy từ tài liệu mà tương tự như mảng (array). Các điểm có thể truy cập qua số thứ tự. Số thứ tự bắt đầu từ 0.

Cả hai đều có Thuộc tính lengthNó trả về số lượng yếu tố (bộ sưu tập) trong danh sách (bộ sưu tập).

HTMLCollection làYếu tố tài liệuBộ sưu tập.

NodeList làĐiểm tài liệuBộ sưu tập của (điểm phần tử, điểm thuộc tính và điểm văn bản).

Các mục HTMLCollection có thể truy cập qua tên, id hoặc số thứ tự.

Mục NodeList chỉ có thể truy cập qua số thứ tự của chúng.

HTMLCollection luôn là mộtThực thờiBộ sưu tập. Ví dụ: Nếu thêm yếu tố <li> vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.

NodeList thường là mộtTĩnhBộ sưu tập. Ví dụ: Nếu thêm yếu tố <li> vào danh sách trong DOM, danh sách trong NodeList sẽ không thay đổi.

getElementsByClassName() và getElementsByTagName() Phương pháp trả về HTMLCollection thực thời.

querySelectorAll() Phương pháp trả về NodeList tĩnh.

childNodes Thuộc tính trả về NodeList thực thời.

Danh sách nút thực thời

Trong một số trường hợp, NodeList làThực thời：Các thay đổi trong DOM sẽ cập nhật NodeList.

childNodes Phương pháp trả về NodeList thực thời.