Đối tượng NodeList là 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]
1. Các phương thức trả về HTMLCollection và NodeList
Bộ sưu tập HTML
Hai phương thức này trả về đối tượng HTMLCollection
- getElementsByTagName[] và
- getElementsByClassName[]
Danh sách nút
Các phương thức trả về NodeList là
- getElementsByName[]
- truy vấnSelectorAll[]
dùng thử
Xem Phương thức Pen 1 trả về HTMLCollection & NodeList của SoftAuthor [@softauthor] trên CodePen
2. HTMLCollection [Nút phần tử] so với NodeList [Tất cả nút]
HTMLCollection only contains element nodes such as
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ó
box 1
box 2
box 3
box 4
Đầ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 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]
2 trên danh sách DOM chẳng hạn như const box = document.getElementById["box"];
// console.log[box.children]; // HTMLCollection[2] [div, div]
// console.log[box.childNodes]; // NodeList[5] [text, div, text, div, text]
3 hoặc const box = document.getElementById["box"];
// console.log[box.children]; // HTMLCollection[2] [div, div]
// console.log[box.childNodes]; // NodeList[5] [text, div, text, div, text]
4