In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > getElementsByClassName

getElementsByClassName method

Browser support:

9	3

Returns a NodeList collection that contains all descendant elements of the current element with the specified class name.

Note: The getElementsByClassName method is supported in Firefox from version 3 and Internet Explorer from version 9.

The returned NodeList collection is a live collection, which means that the modification of the document affects the collection. See Example 2 for details.

If you need a more complex search, use the querySelector and querySelectorAll methods. They search for elements based on selector matching.

Syntax:

object.getElementsByClassName (className);

You can find the related objects in the Supported by objects section below.

Parameters:

className

Required. String that specifies the space-delimited list of class names to look for. This parameter is case-sensitive.

Return value:

Returns a NodeList collection filled with the matching elements. The elements in the returned collection are in source order.

Example HTML code 1:

This example illustrates the use of the getElementsByClassName method:

<head>
    <style>
        .redText {
            color:#FF0000;
        }
        .boldText {
            font-weight:bold;
        }
        .italicText {
            font-style:italic;
        }
    </style>
    <script type="text/javascript">
        function GetRedTextElements () {
            var container = document.getElementById ("container");
            if (container.getElementsByClassName) {
                var redTags = container.getElementsByClassName ("redText");

                alert ("There are " + redTags.length + " elements in the container with class of 'redText'.");

                for (var i = 0; i < redTags.length; i++) {
                    var redTag = redTags[i];
                    alert ("The contents of the " + (i + 1) + ". redText element are\n" + redTag.innerHTML);
                }
            }
            else {
                alert ("Your browser does not support the getElementsByClassName method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedTextElements ()">Get the elements in the container with class of 'redText'!</button>
    <br /><br />
    <div id="container">
        <span class="redText boldText">A bold element in the container with class of 'redText'.</span>
        <br />
        <span class="redText italicText">An italic element in the container with class of 'redText'.</span>
    </div>
    <br /><br />
    <span class="redText boldText">Another element outside the container with class of 'redText'.</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the meaning of live collections with the getElementsByClassName method:

<head>
    <style>
        .redText {
            color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function GetRedTextElements () {
            var container = document.getElementById ("container");
            if (container.getElementsByClassName) {
                var redTags = container.getElementsByClassName ("redText");

                alert ("There are " + redTags.length + " elements in the container with class 'redText'.");

                    // add a new bold element to the container
                var newRedText = document.createElement ("b");
                newRedText.innerHTML = "new redText element";
                newRedText.className = "redText";
                container.appendChild (newRedText);
                alert ("An element with class 'redText' has been added to the container.");

                alert ("There are " + redTags.length + " elements in the container with class 'redText'.");

                    // remove a bold element from the container
                container.removeChild (newRedText);
                alert ("The previously added element has been removed from the container.");

                alert ("There are " + redTags.length + " elements in the container with class 'redText'.");
            }
            else {
                alert ("Your browser does not support the getElementsByClassName method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedTextElements ()">Get the elements in the container with 'redText' class!</button>
    <br /><br />
    <div id="container">
        <b class="redText">A bold element in the container with 'redText' class.</b>
        <br />
        <i class="redText">An italic element in the container with 'redText' class.</i>
        <br />
    </div>
</body>