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

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

getElementsByTagName method

Browser support:

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

The getElementsByTagName method is case-insensitive in HTML and case-sensitive in XML documents.

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

Syntax:

object.getElementsByTagName (tagName);

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

Parameters:

tagName

Required. String that specifies the tag name to look for. If you want to get all descendant element regardless of their tag name, use the '*' string value.

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 getElementsByTagName method:

<head>
    <script type="text/javascript">
        function GetBoldElements () {
            var container = document.getElementById ("container");
            var boldTags = container.getElementsByTagName ("b");

            alert ("There are " + boldTags.length + " bold elements in the container.");

            for (var i = 0; i < boldTags.length; i++) {
                var boldTag = boldTags[i];
                alert ("The contents of the " + (i + 1) + ". bold element are\n" + boldTag.innerHTML);
            }
        }
    </script>
</head>
<body>
    <button onclick="GetBoldElements ()">Get the bold elements in the container!</button>
    <br /><br />
    <div id="container">
        <b>First bold element in the container.</b>
        <br />
        <b>Second bold element in the container.</b>
    </div>
    <br /><br />
    <b>A bold element outside the container.</b>
</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 getElementsByTagName method:

<head>
    <script type="text/javascript">
        function GetBoldElements () {
            var container = document.getElementById ("container");
            var boldTags = container.getElementsByTagName ("b");

            alert ("There are " + boldTags.length + " bold elements in the container.");

                // add a new bold element to the container
            var newBoldTag = document.createElement ("b");
            newBoldTag.innerHTML = "new bold element";
            container.appendChild (newBoldTag);
            alert ("A new bold tag has been added to the container.");

            alert ("There are " + boldTags.length + " bold elements in the container.");

                // remove a bold element from the container
            container.removeChild (newBoldTag);
            alert ("A bold tag has been removed from the container.");

            alert ("There are " + boldTags.length + " bold elements in the container.");
        }
    </script>
</head>
<body>
    <button onclick="GetBoldElements ()">Get the number of bold elements in the container!</button>
    <br /><br />
    <div id="container">
        <b>First bold element in the container.</b>
        <br />
        <b>Second bold element in the container.</b>
    </div>
</body>