JS DOM HTMLCollection Object

HTMLCollection object

The HTMLCollection object represents a general collection of elements (in document order) (similar to an array object, similar to a parameter) and provides methods and properties for selection from the list.

The HTMLCollection in HTML DOM is live; it updates automatically when the underlying document changes.

Methods like getElementsByTagName() return HTMLCollection.

HTMLCollection Properties and Methods

The following table lists the properties and methods of the HTMLCollection object:

Example

This example returns an HTMLCollection:

//　Return the set of elements in the collection document of <p>
var x = document.getElementsByTagName("p");

Change the HTML content of the first <p> element in this document:

var x = document.getElementsByTagName("p");
x.item(0).innerHTML = "HELLO WORLD";

Find out how many <p> elements are in the document:

var len = document.getElementsByTagName("p").length;

Get the content of the <p> element with ID "demo":

var x = document.getElementsByTagName("p").namedItem("demo");
document.getElementById("output").innerHTML = x.innerHTML;

You can also use a shorthand method, which will produce the same result:

var x = document.getElementsByTagName("p")["demo"];
document.getElementById("output").innerHTML = x.innerHTML;