Bộ sưu tập HTML là gì?

NodeList chứa các nút phần tử, nút thuộc tính, nút văn bản, v.v.

Đó là loại khó hiểu .. đúng

Hãy xem xét điều này với một ví dụ mã

Đây là đánh dấu HTML đơn giản

Nó có một div với id được gọi là box-wrapper là phần tử cha

Phần tử cha có một nút văn bản và hai nút phần tử

  I'm Text Node
  
I'm Element Node 1
  
I'm Element Node 2

Hãy xem làm thế nào để có được những đứa trẻ của nó

Để chỉ nhận các nút phần tử, hãy sử dụng. thuộc tính con trên đối tượng tài liệu gốc

Trong trường hợp này. hộp

Các. thuộc tính con trả về HTMLCollection chỉ chứa các nút phần tử

Trong trường hợp này [div, div] nhưng nó bỏ qua dòng chữ “I’m Text Node”

const box = document.getElementById("box");

// console.log(box.children); // HTMLCollection(2) [div, div]
// console.log(box.childNodes); // NodeList(5) [text, div, text, div, text]

Mặt khác, các. Thuộc tính childNodes trên đối tượng tài liệu gốc trả về NodeList chứa các nút phần tử, nút thuộc tính, nút văn bản, v.v.

dùng thử

Xem Bộ sưu tập Pen HTML (Nút phần tử) so với NodeList (Tất cả nút) của SoftAuthor (@softauthor) trên CodePen

3. HTMLCollection (tên, id hoặc số chỉ mục) Vs NodeList (chỉ chỉ mục)

Các mục HTMLCollection có thể được truy cập bằng thuộc tính tên, thuộc tính 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

Bộ sưu tập HTML

Trong ví dụ mã bên dưới, hãy lấy phần tử div con đầu tiên bên trong phần tử cha của trình bao bọc hộp

  
box 1
  
box 2
  
box 3
  
box 4

Để làm điều đó, hãy chuyển đổi phần tử con của phần tử cha trình bao bọc hộp thành HTMLCollection bằng thuộc tính con

Sử dụng thuộc tính số chỉ mục, id hoặc tên để lấy một mục cụ thể từ HTMLCollection bằng phương thức nameItem()

const boxWrapper = document.getElementById('box-wrapper');
const boxes = boxWrapper.children; // HTMLCollection

console.log(boxes[0]); // Using Index WORKS!
console.log(boxes.namedItem("id-box1")); // Using ID WORKS!
console.log(boxes.namedItem("nm-box1")); // Using Name WORKS!
console.log(boxes.namedItem("cls-box1")); // Using Class NULL

Danh sách nút

Chuyển đổi phần tử con của phần tử cha của trình bao bọc hộp thành NodeList bằng cách sử dụng. tài sản conNodes

Khi sử dụng NodeList, bạn chỉ có thể lấy một mục cụ thể bằng cách sử dụng vị trí chỉ mục của nó

const boxWrapper = document.getElementById('box-wrapper');
const boxes = boxWrapper.childNodes; // NodeList

console.log(boxes[0]); // Using Index WORKS!
console.log(boxes.namedItem("id-box1")); // Using ID ERROR!
console.log(boxes.namedItem("nm-box1")); // Using Name ERROR!
console.log(boxes.namedItem("cls-box1")); // Using Class ERROR!

dùng thử

Xem Bộ sưu tập Pen HTML (Tên, Id và Chỉ mục) so với NodeList (Chỉ mục) của SoftAuthor (@softauthor) trên CodePen

4. HTMLCollection (trực tiếp*) Vs NodeList (tĩnh*)

Bộ sưu tập HTML

getElementsByTagName() và getElementsByClassName() đang hoạt động

Khi một tài liệu cơ bản được thay đổi, HTMLCollection sẽ được cập nhật tự động

Hãy xem điều đó trong hành động

Tôi có một phần tử div đơn giản với id box-wrapper và nó có 4 phần tử div con bên trong

Hãy thêm một phần tử vào nó

Đầu tiên, lấy tất cả các phần tử div có. box trong đó bằng cách sử dụng getElementsByClassName() trả về HTMLCollection

Ở giai đoạn này, HTMLCollection có 4 mục trong đó

Sau đó, thêm một phần tử div mới với tên lớp. hộp cho nó

Bây giờ, HTMLCollection có năm mục trong đó

const boxWrapper = document.getElementById("box-wrapper");

const boxes = boxWrapper.getElementsByClassName("box");
console.log(boxes.length); // 4

const div = document.createElement("div");
div.classList.add("box");
div.innerHTML = "box 5";
boxWrapper.appendChild(div);

console.log(boxes.length); // 5

Tương tự, phương thức getElementsByTagName() sẽ tự động trả về HTMLCollection đã cập nhật khi có thay đổi trong danh sách

Có một ngoại lệ. Mặc dù, getElementsByName() trả về NodeList – nhưng nó TRỰC TIẾP

Danh sách nút

NodeList được trả về bởi querySelectorAll() KHÔNG hoạt động

Khi có thay đổi đối với tài liệu cơ bản, nó không tự động cập nhật NodeList

Thay vào đó, nó sẽ tạo một bản sao của NodeList với một phần tử mới

Để có được NodeList cập nhật, bạn sẽ phải gọi lại phương thức querySelectorAll()

const boxes = document.querySelectorAll(".box");
console.log(boxes.length); // 4

const div = document.createElement("div");
div.setAttribute("class", "box");
div.innerHTML = "box 5";
boxWrapper.appendChild(div);

console.log(boxes.length); // 4
console.log(document.querySelectorAll(".box").length); // 5

dùng thử

Xem Pen HTMLCollection (trực tiếp) Vs NodeList (tĩnh) của SoftAuthor (@softauthor) trên CodePen

5. Bộ sưu tập HTML (đối với. của) Vs NodeList (forEach)

Tất cả các phiên bản gần đây của các trình duyệt hiện đại (Safari, Firefox, Chrome, Edge) đều hỗ trợ lặp lại

const box = document.getElementById("box");

// console.log(box.children); // HTMLCollection(2) [div, div]
// console.log(box.childNodes); // NodeList(5) [text, div, text, div, text]

const box = document.getElementById("box");

// console.log(box.children); // HTMLCollection(2) [div, div]
// console.log(box.childNodes); // NodeList(5) [text, div, text, div, text]

const box = document.getElementById("box");

// console.log(box.children); // HTMLCollection(2) [div, div]
// console.log(box.childNodes); // NodeList(5) [text, div, text, div, text]

HTMLCollection trực tiếp là gì?

Làm cách nào để phân tích cú pháp HTMLCollection trong JavaScript?

Cái nào sau đây sẽ trả về một đối tượng HTMLCollection?

Bạn có thể lặp qua HTMLCollection không?