Define/Explain the HTMLCollection
An HTMLCollection is a collection of elements in the DOM. As this is a list of elements, the methods to return the collection use html syntax, such as getElementByTagName() and getElementByClassName().
Define/Explain the NodeList
The NodeList also represents a collection of elements in the DOM but as the objects in the DOM tree refered to as nodes, representing the various elements. The most common method to return a collection this way is querySelectorAll() which uses the CSS syntax to can be called using a css value which as been assigned to the element.
Explain the Differences and/or Similarities
The two are very similar as they both are collections of objects in the DOM. Both are collections which have the appearance of being an array but they are not arrays. Therefore, array methods will not work with either of these. As they are both collections, the length property can be used in both to return the number of elements in the collection. And in both, the elements are indexed and can be accessed that way (like an array however, the index starts at 0 for the first item.). Their differences include:
- HTMLCollection: a collection of document elements
- NodeList: a collection of document nodes
- HTMLCollection: as elements are accessed by name, id or index number
- NodeList: only accessed by index number
- HTMLCollection: is considered "live"; changes to the list in the in the DOM with the JS script will also change the HTMLCollection automatically
- NodeList: is considered "static"; if changes to the list in the JS script are made to update a page, the changes are not automatically updated in the NodeList until a new query is made