”;
The DOM (Document Object Model) collections are a way to group together related HTML elements. They are read-only and can be accessed using the properties of DOM objects such as the document object or a DOM node.
There are many different types of DOM collections, including:
-
The HTMLCollection object is an array-like list (collection) of HTML elements.
-
The NodeList object is a list (collection) of nodes extracted from a document.
-
The Form element collection in HTML DOM is used to set or return the collection of all <input> elements inside a form element.
-
The HTML DOM forms collection is used for returning all the form elements that are present inside the HTML document as a collection.
DOM collections can be used to perform a variety of tasks, such as:
-
Traversing the DOM
-
Adding, removing, or modifying elements
-
Changing the style or content of elements
-
Responding to user events
This tutorial provides basic understanding of DOM collections, particularly HTMLCollection object. The other type of DOM collections are discussed in next chapters.
The HTMLCollection Object
An HTMLCollection object is an array-like data structure of HTML elements. When you use the getElementByTagName()method to access DOM elements, it returns an HTMLCollection object.
It is the same as an array but not an array. You can traverse the HTML collection and access each HTML element through the index, but you can use the pop(), push(), etc. methods with HTML collection.
The methods and properties given below return the HTML collection.
-
getElementByTagName() method
-
getElementByClassname() method
-
children property
Properties and Methods of HTMLCollection Object
Here, we have listed the properties and methods that can be used with HTML collections.
Method / Property | Description |
---|---|
length | To get a count of HTML elements in the collection. |
item() | To get elements from the specific index. |
namedItem() | To get the HTML element using its id from the given collection. |
Example: Traversing the Collection Elements
In the below code, we have added the list of numbers.
In JavaScript, we access all <li> elements using the getElementByTagName() method, which returns the HTML collection.
After that, we use the for…of loop to traverse each HTML element. The collection contains each HTML element in the object format. We used the innnerHTML property with each element of the collection to get its HTML and print it on the web page.
<DOCTYPE html> <html> <body> <ul> <li> One </li> <li> Two </li> <li> Three </li> </ul> <div id = "output"> </div> <script> const output = document.getElementById(''output''); let lists = document.getElementsByTagName(''li''); for (let list of lists) { output.innerHTML += "inner HTML - " + list.innerHTML + "<br>"; } </script> </body> </html>
Example: Getting the length of the collection
In the below code, we used the ”length” property of the collection to get the number of elements in the collection.
<DOCTYPE html> <html> <body> <div class = "text"> JavaScript </div> <div class = "text"> HTML </div> <div class = "text"> CSS </div> <div class = "text"> CPP </div> <div id = "output">The length of the collection is: </div> <script> const divs = document.getElementsByClassName(''text''); document.getElementById(''output'').innerHTML += " " + divs.length; </script> </body> </html>
Example: Using the namedItem method with collection
In the below code, we access all <div> elements using the getElementByClassName() method, returning the collection of <div> elements.
After that, we used the namedItem() method to access the <div> element having id equal to ”JavaScript”.
<DOCTYPE html> <html> <body> <div class = "text" id = "JavaScript"> JavaScript </div> <div class = "text" id = "PHP"> PHP </div> <div class = "text" id = "Python"> Python </div> <div class = "text" id = "Java"> Java </div> <div id = "output">The Element having id equal to JavaScript is: </div> <script> const output = document.getElementById(''output''); const langs = document.getElementsByClassName(''text''); output.innerHTML += langs.namedItem(''JavaScript'').innerHTML; </script> </body> </html>
Collections of document Object and DOM Elements
The document object contains some built-in collection to get the elements from the document.
In the below table, we have listed all collections which can be accessed using the document object.
Collection Name | Description |
---|---|
document.links | To get all <a> elements from the document. |
document.forms | To get all <form> elements from the document. |
document.images | To get all <img> elements from the document. |
document.scripts | To get all <script> elements from the document. |
document.styleSheets | To get all the document”s <link> and <style> elements. |
Element.children | To get a collection of all children of the particular HTML element. |
element.attributes | To get the collection of all attributes of the given element. |
element.options | To get all <options> elements from the document. |
element.classList | To get a collection of class names of a particular DOM element. |
”;