JavaScript HTML DOM Collections
The HTMLCollection Object
The getElementsByTagName() method returns an HTMLCollection object.
An HTMLCollection object is
an array-like list (collection) of HTML elements.
The following code selects all <p> elements in a document:
Example
var
x = document.getElementsByTagName("p");
The elements in the collection can be accessed by an index number.
To access the second <p> element you can write:
y = x[1];
Try it Yourself »
Note: The index starts at 0.
HTML HTMLCollection Length
The length property defines the number of elements in an HTMLCollection:
Example
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
Try it Yourself »
Example explained:
- Create a collection of all
<p>elements - Display the length of the collection
The length property is useful when you want to loop through the elements in a
collection:
Example
Change the background color of all <p> elements:
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}
Try it Yourself »
An HTMLCollection is NOT an array!
An HTMLCollection may look like an array, but it is not.
You can loop through the list and refer to the elements with a number (just like an array).
However, you cannot use array methods like valueOf(), pop(), push(), or join() on an HTMLCollection.
