HTMLCollection is a set or group of HTML elements in an array-like manner. HTMLCollection exists in document order, based on how it is returned. Just like an array it has a length property and methods for accessing each HTML item in its collection.
HTMLCollection is said to be live because it auto-updates when a change is made to the document in the DOM.
Accessing HTMLCollection
We can access HTMLCollection using document objects in JavaScript. These objects are said to return HTMLCollection when in use.
These include;
getElementsByTagName()
getElementsByClassName()
children
document.forms
getElementsByTagName()
The getElemenetsByTagName()
method is used to get HTML elements with similar tag names. This is useful when we want to work with a collection of a particular element within our JavaScript file.
Try the code below
<ul id="parent">
<li id="one" class="children">Apple</li>
<li id="two" class="children">Orange</li>
<li id="three" class="children">Lime</li>
<li id="four" class="children">Banana</li>
</ul>
const getItemsList = document.getElementsByTagName('li');
console.log(getItemsList)
Browser Preview
The getElementsbyTagName()
method returns all li
elements in the current HTML document. The returned elements are arranged in the DOM order and have a length
of 4
with a Prototype
of HTMLCollection
.
getElementsByClassName()
The getElementsByClassName()
method is used to get HTML elements of the same class names.
Try the code below
const getItemsList = document.getElementsByClassName('children');
console.log(getItemsList);
Browser Preview
children
The children
property is used to return an HTMLCollection. This is a read-only property that returns the direct children of a given element.
Try the code example below
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
console.log(children);
Browser Preview
document.forms
The document.forms
is a read-only property that returns an HTMLCollection list of all form elements in the document.
<form action="">
<input type="text" name="text" placeholder="say something">
</form>
<form action="">
<input type="button" name="button" value="button">
</form>
const getItemsList = document.forms;
console.log(getItemsList);
Browser Preview
From the browser preview, the two form tags are returned by the document.forms
property, making it a length of 2
.
Property and Methods
The HTMLCollection
comes with in-built property and methods that can be used to access the modify the elements within the HTMLCollection list. these include.
- length: This property returns the total length of tags present in the HTMLCollection
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
console.log(children.length);
- item(): This method returns the specified element based on the index parsed in.
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
console.log(children.item(2));
-
namedItem(): This method returns the specified element based on the element
Id
parsed in.
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
console.log(children.namedItem('four'));
Using Forloop
HTMLCollection is an array-like collection of HTML elements and as a result, it can be iterated with a forloop to loop through each item in the collection.
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
function bgColor(){
for(let j = 0; j < children.length; j++){
children[j].style.color = 'blue';
}
children[3].style.color = 'orange';
}
bgColor();
Brower Preview
From the browser output, we used forloop
to loop through each item and apply a color
of blue
while for the last item, we set a color
of orange
by specifying the index of the element in the HTMLCollection.
Converting HTMLCollection to an Array (Array.from) Method
HTMLCollection doesn't have JavaScript built-in array methods available. However, converting it to a regular array is required in other to manipulate it with the array methods.
const getItemsList = document.getElementById('parent')
const children = getItemsList.children;
const copy = Array.from(children);
console.log(copy);
copy.forEach((items)=>{
items.style.color = 'plum';
})
Browser Preview
From the browser preview, notice the prototype is now an array.
Adding Items to HTMLCollection
We can add and remove items from HTMLCollection directly from our JavaScript file.
Try the code example below.
HTMLCollection returns a live collection list items, This means when an item is added to the page, it auto-update it in the DOM. The project above display this in action.
Simply add your favorite fruit to the fruit list items and click add, click remove to remove the fruit from the bottom.
While you perform this action, open up your browser console. Any item you add or remove will return the total length of the array in the item list.
Wrapping up
We learned about What is HTMLCollection in JavaScript and we discussed the following.
What is HTMLCollcetion
Accessing HTMLCollcetion
HTMLCollection property and methods
Using forloop with HTMLCollection
Converting HTMLCollection to an Array (Array.from) Method
Adding Items to HTMLCollection
Alright! We’ve come to the end of this tutorial. Thanks for taking the time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin. or email me at ocxigin@gmail.com
Cheers
Top comments (0)