getElementsByTagName

Description
Syntax
Examples
Links

Description

The getElementsByTagName of Document for JS returns a HTMLCollection of all descendant elements if qualifiedName is "*".

Otherwise, returns a HTMLCollection of all descendant elements whose qualified name is qualifiedName. (Matches case-insensitively against elements in the HTML namespace within an HTML document.)

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "*";
            const collection = document.getElementsByTagName(qualifiedName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

2 · * · descendant · all

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

3 · * · descendant · first

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

4 · * · descendant · last

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

5 · qualifiedName · document · all

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const collection = document.getElementsByTagName(qualifiedName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

6 · qualifiedName · document · first

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const collection = document.getElementsByTagName(qualifiedName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

7 · qualifiedName · document · last

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const collection = document.getElementsByTagName(qualifiedName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

8 · qualifiedName · descendant · all

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagName";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

9 · qualifiedName · descendant · first

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

10 · qualifiedName · descendant · last

<!doctype html>
<html>
<body>
    <button>button</button>
    <div id="myid1">
        <p>paragraph.1.1</p>
        <p>paragraph.1.2</p>
        <p>paragraph.1.3</p>
        <pre>pre.1.1</pre>
        <pre>pre.1.2</pre>
        <pre>pre.1.3</pre>
        <span>span.1.1</span>
        <span>span.1.2</span>
        <span>span.1.3</span>
    </div>
    <div id="myid2">
        <p>paragraph.2.1</p>
        <p>paragraph.2.2</p>
        <p>paragraph.2.3</p>
        <pre>pre.2.1</pre>
        <pre>pre.2.2</pre>
        <pre>pre.2.3</pre>
        <span>span.2.1</span>
        <span>span.2.2</span>
        <span>span.2.3</span>
    </div>
    <script>
        function myfunction()
        {
            const qualifiedName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagName(qualifiedName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagName";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>