Hướng dẫn htmlcollection vs nodelist - htmlcollection so với notelist

Sự khác biệt chính giữa một htmlcollection và một cái nút là một người sống và một là tĩnh. Điều này có nghĩa là khi một phần tử được gắn vào DOM, một nút trực tiếp sẽ nhận ra phần tử mới trong khi một nút tĩnh sẽ không.live and one is static. This means that when an element is appended to the DOM, a live node will recognize the new element while a static node will not.

1. HTMLCollection

Các phương thức phần tử getElementsByClassName () và getElementsByTagName () trả về một htmlCollection trực tiếp. Nó chỉ bao gồm các phần tử phù hợp (ví dụ: tên lớp hoặc tên thẻ) và không bao gồm các nút văn bản, nó chỉ cung cấp hai mục phương thức và được đặt tên.

Trong ví dụ dưới đây, tất cả các yếu tố có tên lớp của trái cây được chọn. Phương thức mục () sau đó được sử dụng để truy cập vào trái cây tại INDEX 0 và tên lớp của FRUEN__01 được thêm vào phần tử đó.

const fruits = document.getElementsByClassName(‘fruits’);
fruits.item(0).classList.add(‘fruit__01’)

2. Nodelist

Phương thức phần tử * QuerySelectorall () * Trả về một nút tĩnh. Chúng trông giống như mảng nhưng không.

Các Nodelist có một phương thức Foreach được xác định cũng như một vài phương thức khác bao gồm mục, mục, khóa và giá trị.

Những người tham gia Nodel hành xử khác nhau tùy thuộc vào cách bạn truy cập chúng; Nếu bạn truy cập các yếu tố bằng cách sử dụng trẻ em, danh sách được trả về là trực tiếp và sẽ cập nhật khi nhiều yếu tố được thêm vào nút. Nếu nó được truy cập bằng cách sử dụng querySelectorall (), danh sách được trả lại là tĩnh và sẽ không cập nhật nếu có nhiều phần tử được thêm vào nút.

// returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;

Xem Codepen sau đây để biết ví dụ trong Trình duyệt:

HTMLCollection vs Nodelist

Nội Dung

Nội dung chính ShowShow

• 2. Thuộc tính length với NodeList
• 3. Phương thức sử dụng với NodeList
• 3.1. NodeList.item
• 3.2. NodeList.entries 
• 3.3. Vòng lặp forEach
• 3.4. NodeList.keys() và NodeList.values​()
• 4. Sự Khác biệt giữa HTMLCollection và NodeList

• 1. DOM Node Lists trong JavaScript là gì?
• 2. Thuộc tính length với NodeList
• 3. Phương thức sử dụng với NodeList
  • 3.1. NodeList.item
  • 3.2. NodeList.entries 
  • 3.3. Vòng lặp forEach
  • 3.4. NodeList.keys() và NodeList.values​()
• 4. Sự Khác biệt giữa HTMLCollection và NodeList

1. DOM Node Lists trong JavaScript là gì?NodeList cũng có thể bao gồm tất cả các nút trong một tập hợp các nút được chọn cụ thể. Nó thường được trả về bởi các thuộc tính như Node.childNodes và các phương thức như document.querySelectorAll() . Một NodeList có thể được chọn bằng cách sử dụng phương thức getElementsByTagName() của đối tượng document trong Js .

Ví dụ: lấy một tập hợp tất cả các nút div trong documentdiv trong document

// returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;0

Nếu có hai phần tử div trong document , thì NodeList (giá trị của biến div_nodes ở đây) chứa hai nút. Nếu có ba phần tử, NodeList chứa ba phần tửdocument , thì NodeList (giá trị của biến div_nodes ở đây) chứa hai nút. Nếu có ba phần tử, NodeList chứa ba phần tử

Chọn tất cả node trong document : // returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;1node

trong document : // returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;1

Các phần tử trong NodeList có thể được truy cập bằng một số chỉ mục. Để truy cập vào node thứ 2 ta có thể viết // returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;2 (chỉ mục sẽ bắt đầu từ số 0)NodeList có thể được truy cập bằng một số chỉ mục. Để truy cập vào node

thứ 2 ta có thể viết // returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;2 (chỉ mục sẽ bắt đầu từ số 0)

<h2>JavaScript</h2> <p>Hello World!</p> <p>Lập Trình Từ Đầu!</p> <p id="demo"></p> <script> const myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = "The innerHTML of the second paragraph is: " + myNodelist[1].innerHTML; </script>

2. Thuộc tính length với NodeList

Thuộc tính length dùng để xác định số lượng node trong NodeList . Cú pháp của nó là:length dùng để xác định số lượng node trong NodeList . Cú pháp của nó là:

// returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;3

Trong đó numItems là một giá trị số nguyên đại diện cho số mục trong một NodeListnumItems là một giá trị số nguyên đại diện cho số mục trong một NodeList

Ví dụ:

<h2>JavaScript</h2> <p>Hellow World!</p> <p>Lập Trình Từ Đầu!</p> <p id="demo"></p> <script> const myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = "Tài liệu này chứa " + myNodelist.length + " đoạn văn."; </script>

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeListlength cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeList

<h2>JavaScript</h2> <p>Hello World!</p> <p>Lập Trình Từ Đầu!</p> <p>Nhấp vào nút để thay đổi màu của tất cả các phần tử p.</p> <button title="myFunction()">Try it</button> <script> function myFunction() { const myNodelist = document.querySelectorAll("p"); for (let i = 0; i < myNodelist.length; i++) { myNodelist[i].style.color = "blue"; } } </script>

3. Phương thức sử dụng với NodeList

3.1. NodeList.item

Phương thức này sẽ trả về một node từ một NodeList . Phương thức này sẽ không đưa ra các ngoại lệ miễn là ta cung cấp các đối số. Giá trị của null được trả về nếu chỉ mục nằm ngoài phạm vi và một TypeError được trả về nếu không có đối số nào được cung cấp.NodeList . Phương thức này sẽ không đưa ra các ngoại lệ miễn là ta cung cấp các đối số. Giá trị của null được trả về nếu chỉ mục nằm ngoài phạm vi và một TypeError được trả về nếu không có đối số nào được cung cấp.

Cú pháp : // returns static collection
const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;4

Ví dụ:

var tables = document.getElementsByTagName("table"); var firstTable = tables.item(1); // hoặc các bảng [1] - trả về bảng thứ hai trong DOM

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeList

3. Phương thức sử dụng với NodeListNodeList.entries trả về một iterator cho phép đi qua tất cả cặp key/value có trong đối tượng này. Giá trị chính là các đối tượng node.

Ví dụ:

var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); node.appendChild(kid1); node.appendChild(kid2); node.appendChild(kid3); var list = node.childNodes; // sử dụng for..of for(var entry of list.entries()) { console.log(entry); }

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeList

3. Phương thức sử dụng với NodeListiterable . Phương thức forEach của NodeList gọi callback được cấp trong tham số của forEach cho mỗi cặp giá trị trong danh sách và theo thứ tự chèn.

3.1. NodeList.item

Phương thức này sẽ trả về một node từ một NodeList . Phương thức này sẽ không đưa ra các ngoại lệ miễn là ta cung cấp các đối số. Giá trị của null được trả về nếu chỉ mục nằm ngoài phạm vi và một TypeError được trả về nếu không có đối số nào được cung cấp.

• Cú pháp : // returns static collection
  const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
  const fruits = document.querySelector(‘.fruits’);
  const childFruit = fruits.childNodes;4 : một hàm để thực thi trên mỗi phần tử của someNodeList với việc chấp nhận các tham số như: currentValue(phần tử hiện tại đang được xử lý trong someNodeList) và currentIndex (chỉ mục của đối tượng currentValue đang được xử lý trong someNodeList)
• 3.2. NodeList.entries  : giá trị được sử dụng khi thực thi callback

Ví dụ:

let node = document.createElement("div"); let kid1 = document.createElement("p"); let kid2 = document.createTextNode("hey"); let kid3 = document.createElement("span"); node.appendChild(kid1); node.appendChild(kid2); node.appendChild(kid3); let list = node.childNodes; list.forEach( function(currentValue, currentIndex, listObj) { document.write(currentValue + ', ' + currentIndex + ', ' + this); }, 'myThisArg' );

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeList

3. Phương thức sử dụng với NodeListNodeList.keys() trả về một iterator cho phép đi qua tất cả các key có trong đối tượng này

Ví dụ:

var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); node.appendChild(kid1); node.appendChild(kid2); node.appendChild(kid3); var list = node.childNodes; // Using for..of for(var key of list.keys()) { document.write(key); }

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeListNodeList.values​() trả về một iterator cho phép đi qua tất cả value có trong đối tượng này

Ví dụ:

var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); node.appendChild(kid1); node.appendChild(kid2); node.appendChild(kid3); var list = node.childNodes; // Using for..of for(var value of list.values()) { document.write(value); }

Thuộc tính length cũng rất hữu ích khi khi ta muốn lặp qua các node trong NodeList

3. Phương thức sử dụng với NodeListHTMLCollection là một tập hợp các phần tử HTML. Một NodeList là một tập hợp các node tài liệu. Trong nhiều trường hợp, hai đối tượng này rất giống nhau.

3.1. NodeList.itemHTMLCollection và NodeList là một danh sách giống như mảng (collection) các đối tượng. Cả hai đều có thuộc tính chiều dài xác định số lượng mục trong danh sách. Cả hai đều cung cấp một chỉ mục (0, 1, 2, 3, 4, …) để truy cập vào từng mục như một mảng. Nhưng:

• Phương thức này sẽ trả về một node từ một NodeList . Phương thức này sẽ không đưa ra các ngoại lệ miễn là ta cung cấp các đối số. Giá trị của null được trả về nếu chỉ mục nằm ngoài phạm vi và một TypeError được trả về nếu không có đối số nào được cung cấp.HTMLCollection có thể được truy cập theo tên, id hoặc số thứ tự của chúng.
• Cú pháp : // returns static collection
  const fruits = document.querySelectorAll(‘.fruits’);// returns live collection
  const fruits = document.querySelector(‘.fruits’);
  const childFruit = fruits.childNodes;4NodeList chỉ có thể được truy cập bởi số chỉ mục của chúng. Chỉ đối tượng NodeList có thể chứa các node thuộc tính và văn bản.

3.2. NodeList.entries NodeList và xem các node của nó như là một mảng. Tuy nhiên, bạn không thể sử dụng phương thức mảng như valueOf() , push() , pop() , hoặc join() trên một danh sách node .