When I am implementing Dynamic Select Menu in a Rails application, I found out that NodeList
is a live collection that will automatically update the collection if there is any changes in the DOM.
For example, see this code snippet from MDN documentation:
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); // outputs "3"
However, if you use document.querySelectorAll
to select elements, the NodeList
returned will be static.
For more, refer to the MDN web docs.
document.getElementsByClassName
and document.getElementsByTagName
, on the other hand, return HTMLCollection
which is always live.
If you want to know more about this, refer to this stackoverflow answer.
Tags: dom javascript