The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

NodeList objects are collections of nodes such as those returned by properties such as Node.childNodes and the document.querySelectorAll() method.

In some cases, theNodeListis a live collection, which means that changes in the DOM are reflected in the collection. For example,Node.childNodesis live:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"

In other cases, theNodeListis a_static collection,_meaning any subsequent change in the DOM does not affect the content of the collection.document.querySelectorAll()returns a staticNodeList.

let parentDiv = document.getElementById('container')
let nodeListDivs = document.querySelectorAll('.divy')
let htmlCollectionDivs = document.getElementsByClassName('divy')
nodeListDivs.length //=> 4
htmlCollectionDivs.length //=> 4
//append new child to container
var newDiv = document.createElement('div');
newDiv.className = 'divy'
parentDiv.appendChild(newDiv)
nodeListDivs.length //=> 4
htmlCollectionDivs.length //=> 5