What do the querySelectorAll and getElementsBy* methods return?

Question

getElementsByClassName (and similar functions like getElementsByTagName and querySelectorAll) works with getElementById Is it the same way? Return an array of elements?

The reason I ask is because I'm trying to change the style of all elements using getElementsByClassName. see below.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

Answer 1

You use array as object, getElementbyId and getElementsByClassName is:

• getElementbyId will return an Element object < /a> or null if no element with that ID is found
• getElementsByClassName will return a live HTMLCollection< /a>, which may be of length 0
if no matching elements are found

getElementsByClassName

https://www.w3.org/ TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

Get ElementById

https://developer.mozilla.org/en- US/docs/Web/API/Document/getElementById

Include the following lines in your code:

will not work as expected because getElementByClassName will return an array, and that array does not have style < /code> properties that you can Each element is accessed by iteration.

That's why the function getElementById works for you, the function will return the direct object. Therefore, you will be able to access the style property.

Answer 2

Your getElementById code works because the ID must be unique, so the function always returns only one element (or null if not found) ).

However, these methods getElementsByClassName, getElementsByName, getItemByTagName, and getElementsByTagNameNS Returns an iterable collection of elements.

Method names provide hints: getElement implies singular, while getElements implies plural.

MethodsquerySelector also returns a single element, and querySelectorAll returns an iterable collection.

The iterable collection can be NodeList or HTMLCollectiona>.

getElementsByName and querySelectorAll both specify to return the node list; othersgetElementsBy * Method specifies the return of a < code>HTMLCollection, but please note that some browser versions implement this differently.

These two collection types do not provide the same properties as elements, nodes, or similar types; that is why from document.getElements…(…) Reason for failure to read style. In other words: NodeList or HTMLCollection does not have style; only Element has style.

---

These "array-like" collections are lists of zero or more elements that you need to iterate over to access them. While you can iterate over them just like arrays, note that they are not the same as " https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/Array” rel="noreferrer">arrays. In modern browsers you can use

Array.from; then you can use forEach and other array methods such as iteration methods ：

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

In older browsers that do not support Array.from or the iteration method, you can still use

Array.prototype.slice.call. Then you can iterate over it like a real array:

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

You can also iterate over the

NodeList

or HTMLCollection itself, but note that in most cases these collections are live (MDN Document , DOM Specification), that is, they are updated as the DOM changes. So if you insert or remove elements while looping, make sure you don't accidentally skip some elements or create an infinite loop . MDN documentation should always indicate whether a method returns a live collection or a static collection. For example,

NodeList

provides some iteration methods, such as forEach in modern browsers:

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

You can also use a simple

for

loop:

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

Narration:

.childNodes generates a live< /a> NodeList and .children Generates a live HTMLCollection, so these two getters also need to be handled with care.

There are libraries, such as

---

jQuery

, that make DOM queries shorter and create an abstraction layer over "an element" and a "collection of elements":

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