getElementsByTagNameNS

Description
Syntax
Examples
Links

Description

The getElementsByTagNameNS of Document for JS returns a HTMLCollection of all descendant elements if namespace and localName are "*".

If only namespace is "*", returns a HTMLCollection of all descendant elements whose local name is localName.

If only localName is "*", returns a HTMLCollection of all descendant elements whose namespace is namespace.

Otherwise, returns a HTMLCollection of all descendant elements whose namespace is namespace and local name is localName.

Syntax

collection = document.getElementsByTagNameNS(namespace, localName)

Parameters

<!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 namespace = "*";
            const localName = "*";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                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 namespace = "*";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                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 namespace = "*";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            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 namespace = "*";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

5 · * localName · 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 namespace = "*";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

6 · * localName · 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 namespace = "*";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

7 · * localName · 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 namespace = "*";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

8 · * localName · 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 namespace = "*";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

9 · * localName · 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 namespace = "*";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

10 · * localName · 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 namespace = "*";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

11 · namespace * · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "*";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

12 · namespace * · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

13 · namespace * · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

14 · namespace * · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "*";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

15 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

16 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

17 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const collection = document.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

18 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            for(let i = 0; i < collection.length; ++i)
            {
                const item = collection[i];
                item.innerHTML = "getElementsByTagNameNS";
                item.style.color = "red";
            }
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

19 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[0];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>

20 · namespace localName · 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 namespace = "http://www.w3.org/1999/xhtml";
            const localName = "p";
            const descendant = document.getElementById("myid2");
            const collection = descendant.getElementsByTagNameNS(namespace, localName);
            const item = collection[collection.length - 1];
            item.innerHTML = "getElementsByTagNameNS";
            item.style.color = "red";
        }
        document.querySelector("button").addEventListener("mouseover", myfunction);
    </script>
</body>
</html>