HTML Collections

When selecting elements on a web page there are various ways that you can do this.

W3C say:

An HTMLCollection object is an array-like list (collection) of HTML elements. (pseudo array)

The getElementsByTagName() method returns an HTMLCollection object.

An Array or not

The returned information from an HTML Collection Object is in the form of "collection" which can be interegated in a similar way to an array. This means that the "collection" can be traversed over its length and the information extracted from the "collection".

I have used this technique, reasonably successfully, to extract references to elements on a web page.

The statement:
var acc = document.getElementsByClassName("accordion");
retrieves the "collection" of elements with the name "accordion"

In this particular instance the variable (a collection) is traversed and eventListeners are added (this need to be looked more!)

There is an error here - the JavaScript in the page reacts differently to the way it does in an external .js file - double click as opposed to just a click.


External Sources

HTML Collections - January 2021