Khái niệm

HTMLCollection là gì?

• HTMLCollection là một đối tượng trong JavaScript, đại diện cho một tập hợp (collection) các phần tử HTML.
• HTMLCollection chủ yếu được sử dụng khi làm việc với các kết quả trả về từ các phương thức DOM như getElementsByClassName, getElementsByTagName.

NodeLisst là gì?

• NodeList là một đối tượng trong JavaScript, đại diện cho một tập hợp (collection) các nút trong DOM (Document Object Model).
• NodeList thường được tạo ra khi bạn sử dụng các phương thức DOM như querySelectorAll, childNodes.

Sự giống nhau

1. HTMLcollection và NodeList rất là giống nhau.
2. Cả hai đều là một tập hợp các Nodes (elements) được lấy ra từ Document, thông qua các phương thức get element trong DOM.
3. Những Nodes có thể được truy cập thông qua các chỉ số index.
4. Cả hai đều có thuộc tính length để trả về số phần tử của tập hợp.

Sự khác nhau

Định nghĩa

• HTMLCollection là 1 tập hợp các document elements.
• NodeList là 1 tập hợp các document nodes (element nodes, attribute nodes và text nodes)

Cách truy cập các item con

Những item của HTMLCollection có thể được truy cập bằng tên, id, chỉ số index. Những item của NodeList chỉ được truy cập bằng chỉ số index.

LIVE hay STATIC Collection

• Live Collection: HTMLCollection là một "live collection", nghĩa là nó sẽ tự động cập nhật khi có sự thay đổi trong DOM. Nếu có thêm hoặc xóa phần tử mà phù hợp với điều kiện tìm kiếm, HTMLCollection sẽ tự động cập nhật.

• NodeList có thể là "live" hoặc "static". Một số phương thức như querySelectorAll trả về NodeList live, nghĩa là nó sẽ tự động cập nhật khi có thay đổi trong DOM. Ngược lại, một số phương thức khác như childNodes trả về NodeList static, nghĩa là nó không cập nhật khi có thay đổi trong DOM.

Theo cách tạo ra

1. Với các phương thức getElementsByClassName() và getElementsByTagName() methods sẽ trả về 1 live HTMLCollection.
2. Với phương thức querySelectorAll() method sẽ trả về 1 static NodeList. Với thuộc tính childNodes property sẽ trả về 1 live NodeList.