JavaScript HTML DOM danh sách nút

Đối tượng HTML DOM NodeList

NodeList Đối tượng là danh sách các nút được lấy từ tài liệu (hợp集).

Đối tượng NodeList gần như giống hệt đối tượng HTMLCollection.

Nếu sử dụng getElementsByClassName() Phương thức, một số trình duyệt (cũ) sẽ trả về NodeList đối tượng thay vì HTMLCollection.

Tất cả các trình duyệt sẽ trả về childNodes Thuộc tính trả về đối tượng NodeList.

Hầu hết các trình duyệt sẽ trả về querySelectorAll() Phương thức trả về đối tượng NodeList.

Mã dưới đây chọn tất cả các phần tử <p> trong tài liệu:

Mô hình

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

Thử ngay

Các phần tử trong NodeList có thể được truy cập qua chỉ số.

Nếu bạn muốn truy cập vào phần tử <p> thứ hai, bạn có thể viết như sau:

y = myNodeList[1];

Ghi chú:Chỉ số bắt đầu từ 0.

Độ dài của HTML DOM Node List

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

Mô hình

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

Thử ngay

Giải thích ví dụ:

  • Tạo danh sách tất cả các phần tử <p>
  • Hiển thị độ dài của danh sách này

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

Mô hình

Thay đổi màu nền của tất cả các phần tử <p> trong danh sách nút:

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

Thử ngay

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

HTMLCollection (chương trước) là tập hợp các yếu tố HTML.

NodeList là tập hợp các nút văn bản.

NodeList gần như hoàn toàn giống với HTML Collection.

HTMLCollection và NodeList đối tượng đều là danh sách các đối tượng (mảng) dạng class mảng.

Họ đều có định nghĩa số lượng mục trong danh sách (mảng)。 length Thuộc tính.

Cả hai đều có thể truy cập mỗi mục thông qua chỉ số (0, 1, 2, 3, 4, ...) như một mảng.

Để truy cập các mục HTMLCollection, bạn có thể sử dụng tên, id hoặc số thứ tự của chúng.

Để truy cập các mục NodeList, bạn chỉ có thể sử dụng số thứ tự của chúng.

Chỉ NodeList đối tượng mới có thể chứa các nút và các nút văn bản.

Danh sách nút không phải là mảng!

Danh sách nút trông giống như một mảng nhưng không phải là.

Bạn có thể duyệt qua danh sách nút và truy cập các nút của nó như một mảng.

Tuy nhiên, bạn không thể sử dụng các phương pháp mảng đối với danh sách nút, chẳng hạn như valueOf()、push()、pop() hoặc join().