HTMLCollection is an array-like object that represents a collection of HTML elements in the DOM (Document Object Model). It is live, which means it updates automatically when the structure of the document changes.
How to Get an HTMLCollection?
Here are some ways to get HTMLCollection using JavaScript are as below,
Using document.getElementsByTagName()
It returns all elements with the specified tag name.
let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // HTMLCollection of all <p> elements
Using document.getElementsByClassName()
It returns all elements with the specified class name.
let items = document.getElementsByClassName("item");
console.log(items); // HTMLCollection of elements with class "item"
Using document.forms
It returns all <form> elements in the document.
let forms = document.forms;
console.log(forms); // HTMLCollection of all <form> elements
Using document.images
It returns all <img> elements.
let images = document.images;
console.log(images); // HTMLCollection of all <img> elements
Using document.links
It returns all <a> elements with href attributes.
let links = document.links;
console.log(links); // HTMLCollection of all links
Properties of an HTMLCollection
.length– Returns the number of elements in the collection.
console.log(document.getElementsByTagName("p").length);
- Accessing elements using indexes - similar to an array.
let firstParagraph = document.getElementsByTagName("p")[0];
console.log(firstParagraph);
- Accessing elements using the
namedItem()method
let element = document.getElementsByName("username").namedItem("user1");
console.log(element);
Key Features of HTMLCollection
Live Collection: It automatically updates when elements are added or removed from the DOM.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTMLCollection Example</title>
</head>
<body>
<div class="item">Thi is the Div 1.</div>
<div class="item">Thi is the Div 2.</div>
<div class="item">Thi is the Div 3.</div>
<script type="text/javascript">
let divs = document.getElementsByTagName("div");
console.log(divs.length); // 3
document.body.appendChild(document.createElement("div"));
console.log(divs.length); // 4 (updated automatically)
</script>
</body>
</html>
Not an Array: It doesn't have array methods like forEach(),
map(), or filter().
let elements = document.getElementsByTagName("p");
console.log(elements instanceof Array); // false
Convert to an Array (if needed):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTMLCollection Example</title>
</head>
<body>
<div class="item">Thi is the Div 1.</div>
<div class="item">Thi is the Div 2.</div>
<div class="item">Thi is the Div 3.</div>
<script type="text/javascript">
let elementsArray = Array.from(document.getElementsByClassName("item"));
elementsArray.forEach(item => console.log(item.textContent));
</script>
</body>
</html>
Summary
- HTMLCollection is a live collection that updates dynamically when the document changes.
- It can be accessed using indexing or
namedItem(), but it does not have built-in array methods. - If array operations are needed, convert it using
Array.from()or[...HTMLCollection].
Also, Read: Explain the javascript event handling
Leave Comment