javascript – What do querySelectorAll and getElementsBy* strategies return?

Your getElementById code works since IDs must be distinctive and thus the perform at all times returns precisely one component (or null if none was discovered).

Nonetheless, the strategies
getElementsByClassName,
getElementsByName,
getElementsByTagName, and
getElementsByTagNameNS
return an iterable assortment of components.

The strategy names present the trace: getElement implies singular, whereas getElements implies plural.

The strategy querySelector additionally returns a single component, and querySelectorAll returns an iterable assortment.

The iterable assortment can both be a NodeList or an HTMLCollection.

getElementsByName and querySelectorAll are each specified to return a NodeList; the opposite getElementsBy* strategies are specified to return an HTMLCollection, however please observe that some browser variations implement this in another way.

Each of those assortment sorts don’t supply the identical properties that Parts, Nodes, or comparable sorts supply; that’s why studying fashion off of doc.getElements…(…) fails.
In different phrases: a NodeList or an HTMLCollection doesn’t have a fashion; solely an Aspect has a fashion.

These “array-like” collections are lists that include zero or extra components, which you must iterate over, with a view to entry them.
When you can iterate over them equally to an array, observe that they’re completely different from Arrays.

In trendy browsers, you’ll be able to convert these iterables to a correct Array with Array.from; then you need to use forEach and different Array strategies, e.g. iteration strategies:

Array.from(doc.getElementsByClassName("myElement"))
  .forEach((component) => component.fashion.dimension = "100px");

In outdated browsers that don’t assist Array.from or the iteration strategies, you’ll be able to nonetheless use Array.prototype.slice.name.
Then you’ll be able to iterate over it such as you would with an actual array:

var components = Array.prototype.slice
    .name(doc.getElementsByClassName("myElement"));

for(var i = 0; i < components.size; ++i){
  components[i].fashion.dimension = "100px";
}

It’s also possible to iterate over the NodeList or HTMLCollection itself, however bear in mind that in most circumstances, these collections are stay (MDN docs, DOM spec), i.e. they’re up to date because the DOM modifications.
So when you insert or take away components as you loop, be sure that to not unintentionally skip over some components or create an infinite loop.
MDN documentation ought to at all times observe if a technique returns a stay assortment or a static one.

For instance, a NodeList gives some iteration strategies comparable to forEach in trendy browsers:

doc.querySelectorAll(".myElement")
  .forEach((component) => component.fashion.dimension = "100px");

A easy for loop will also be used:

var components = doc.getElementsByClassName("myElement");

for(var i = 0; i < components.size; ++i){
  components[i].fashion.dimension = "100px";
}

Apart: .childNodes yields a stay NodeList and .kids yields a stay HTMLCollection, so these two getters additionally have to be dealt with rigorously.

There are some libraries like jQuery which make DOM querying a bit shorter and create a layer of abstraction over “one component” and “a set of components”:

$(".myElement").css("dimension", "100px");