getElementsByClassName

Description
Syntax
Examples
Links

Description

The getElementsByClassName of Document for JS returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.

Syntax

collection = document.getElementsByClassName(classNames)
collection = element.getElementsByClassName(classNames)

Parameters

classNames

A space-separated list of classes.

Examples

1 · document · all

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid2">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid3">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <script>
        function myfunction()
        {
            const classNames = "myclass";
            const collection = document.getElementsByClassName(classNames);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByClassName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

2 · document · first

3 · document · last

4 · element · all

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid2">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid3">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <script>
        function myfunction()
        {
            const element = document.getElementById("myid2");
            const classNames = "myclass";
            const collection = element.getElementsByClassName(classNames);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByClassName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

5 · element · first

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid2">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid3">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <script>
        function myfunction()
        {
            const element = document.getElementById("myid2");
            const classNames = "myclass";
            const collection = element.getElementsByClassName(classNames);
            const item = collection[0];
            item.innerHTML = "getElementsByClassName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

6 · element · last

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid2">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <div id="myid3">
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
        <p class="myclass">paragraph</p>
    </div>
    <script>
        function myfunction()
        {
            const element = document.getElementById("myid2");
            const classNames = "myclass";
            const collection = element.getElementsByClassName(classNames);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByClassName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>