JavaScript DOM HTML Collections

The HTMLCollection interface represents an ordered collection of HTML elements. These collections are "live," meaning they update automatically as soon as the structure of the HTML document changes. They are most commonly obtained as results of methods that search for multiple elements at once.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript HTMLCollection Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .item {
            padding: 12px;
            margin: 8px 0;
            border-radius: 6px;
            font-weight: bold;
            font-family: sans-serif;
        }
        #result-display {
            margin-top: 25px;
            padding: 20px;
            border-radius: 8px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="item">Element 1 (Index 0)</div>
    <div class="item">Element 2 (Index 1)</div>
    <div class="item">Element 3 (Index 2)</div>
    
    <div id="result-display">
        Click the "RUN" button to let JavaScript set the styles and analyze the collection!
    </div>
    
    <script>
        // 1. Get a collection of all elements with the class "item"
        const collection = document.getElementsByClassName("item");
    
        /* 2. Command JavaScript to set the colors. We use the setProperty() method 
        because (unlike direct .style.color access) it allows us to add the 
        "!important" parameter. This is necessary to ensure our styles override 
        any potential color conflicts from the main CSS/SASS file. */
        // First element
        collection[0].style.setProperty("background-color", "#e3f2fd", "important");
        collection[0].style.setProperty("color", "#0d47a1", "important");
        
        // Second element
        collection[1].style.setProperty("background-color", "#f1f8e9", "important");
        collection[1].style.setProperty("color", "#33691e", "important");
        
        // Third element
        collection[2].style.setProperty("background-color", "#fff3e0", "important");
        collection[2].style.setProperty("color", "#e65100", "important");
    
        // Style for the terminal-like output
        const terminal = document.getElementById("result-display");
        terminal.style.setProperty("background-color", "#333333", "important");
        terminal.style.setProperty("color", "#c2ff02", "important");
    
        // 3. Analyze the collection for output
        let analysis = ">> SYSTEM ANALYSIS...<br>";
        analysis += "Elements found: " + collection.length + "<br>";
        analysis += "Content at index 1: " + collection[1].innerText + "<br>";
        analysis += ">> STATUS: Successfully refreshed.";
    
        terminal.innerHTML = analysis;
    </script>
</body>
</html>

RESULT

item()	Returns the element at the specified index.	See example
length	Returns the number of elements in the HTMLCollection.	See example
namedItem()	Returns the element with the specified ID.	See example