--- title: "Explain the HTML Collection in JavaScript" description: "Let's see all the types of the html collection with the examples in this article." author: "Ashutosh Patel" published: 2025-02-17 updated: 2025-02-17 canonical: https://www.mindstick.com/articles/338557/explain-the-html-collection-in-javascript category: "javascript" tags: ["javascript", "javascript object", "javascript method"] reading_time: 3 minutes --- # Explain the HTML Collection in JavaScript **HTMLCollection** is an array-like object that represents a [collection](https://www.mindstick.com/interview/2199/what-is-the-collections-api-in-java) of [HTML elements](https://answers.mindstick.com/qa/93760/how-to-find-the-html-elements-by-using-javascript) in the DOM ([Document](https://answers.mindstick.com/qa/49880/how-to-open-a-pub-document-on-mac-os-x) [Object Model](https://www.mindstick.com/forum/158432/what-is-the-document-object-model-dom-and-how-does-it-relate-to-web-development)). It is live, which means it updates automatically when the [structure](https://www.mindstick.com/blog/302153/structured-vs-unstructured-data-key-differences) 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. ```javascript let paragraphs = document.getElementsByTagName("p"); console.log(paragraphs); // HTMLCollection of all

elements ``` **Using** `document.getElementsByClassName()` It returns all elements with the specified [class name](https://www.mindstick.com/forum/12871/how-to-get-class-name). ```javascript let items = document.getElementsByClassName("item"); console.log(items); // HTMLCollection of elements with class "item" ``` **Using** `document.forms` It returns all

elements in the document. ```javascript let forms = document.forms; console.log(forms); // HTMLCollection of all elements ``` **Using** `document.images` It returns all `` elements. ```javascript let images = document.images; console.log(images); // HTMLCollection of all elements ``` **Using** `document.links` It returns all `` elements with `href` attributes. ```javascript let links = document.links; console.log(links); // HTMLCollection of all links ``` #### Properties of an HTMLCollection - `.length` – Returns the number of elements in the collection. ```javascript console.log(document.getElementsByTagName("p").length); ``` - Accessing elements using **indexes** - similar to an array. ```javascript let firstParagraph = document.getElementsByTagName("p")[0]; console.log(firstParagraph); ``` - Accessing elements using the `namedItem()` method ```javascript 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. ```html HTMLCollection Example
Thi is the Div 1.
Thi is the Div 2.
Thi is the Div 3.
``` **Not an Array:** It doesn't have [array methods](https://www.mindstick.com/interview/23453/array-methods-function-in-python) like `forEach()`, `map()`, or `filter()`. ```javascript let elements = document.getElementsByTagName("p"); console.log(elements instanceof Array); // false ``` **Convert to an Array (if needed)**: ```html HTMLCollection Example
Thi is the Div 1.
Thi is the Div 2.
Thi is the Div 3.
``` ## Summary - **HTMLCollection is a live collection** that updates dynamically when the document changes. - It can be accessed using **[indexing](https://answers.mindstick.com/qa/30331/what-is-indexing-in-seo)** or `namedItem()`, but it does not have built-in array methods. - If array [operations](https://answers.mindstick.com/qa/34054/who-has-taken-charge-as-the-new-director-general-of-military-operations-dgmo-of-the-indian-army) are needed, convert it using `Array.from()` or `[...HTMLCollection]`. Also, Read: [Explain the javascript event handling](https://www.mindstick.com/articles/338543/explain-the-javascript-event-handling) --- Original Source: https://www.mindstick.com/articles/338557/explain-the-html-collection-in-javascript Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.