What do querySelectorAll and getElementsBy* methods return?

dmo picture dmo · May 22, 2012 · Viewed 83.6k times · Source

Do getElementsByClassName (and similar functions like getElementsByTagName and querySelectorAll) work the same as getElementById or do they return an array of elements?

The reason I ask is because I am 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

ThiefMaster picture ThiefMaster · May 22, 2012

Your getElementById() code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found).

However, getElementsByClassName(), querySelectorAll(), and other getElementsBy* methods return an array-like collection of elements. Iterate over it like you would with a real array:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

If you prefer something shorter, consider using jQuery:

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