revision:
The getElementsByTagNameNS() method returns a list of elements with the given tag name belonging to the given namespace. The complete document is searched, including the root node..
getElementsByTagNameNS(namespace, name)
Parameters:
namespace : the namespace URI of elements to look for
name : either the local name of elements to look for or the special value *, which matches all elements
<script>
function getAllParaElems() {
const allParas = document.getElementsByTagNameNS(
"http://www.w3.org/1999/xhtml",
"p"
);
const num = allParas.length;
alert(`There are ${num} <p> elements in this document`);
}
function div1ParaElems() {
const div1 = document.getElementById("div1");
const div1Paras = div1.getElementsByTagNameNS(
"http://www.w3.org/1999/xhtml",
"p"
);
const num = div1Paras.length;
alert(`There are ${num} <p> elements in div1 element`);
}
function div2ParaElems() {
const div2 = document.getElementById("div2");
const div2Paras = div2.getElementsByTagNameNS(
"http://www.w3.org/1999/xhtml",
"p"
);
const num = div2Paras.length;
alert(`There are ${num} <p> elements in div2 element`);
}
</script>
<body style="border: solid green 3px">
<p>Some outer text</p>
<p>Some outer text</p>
<div id="div1" style="border: solid blue 3px">
<p>Some div1 text</p>
<p>Some div1 text</p>
<p>Some div1 text</p>
<div id="div2" style="border: solid red 3px">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p>Some outer text</p>
<p>Some outer text</p>
<button onclick="getAllParaElems();">
Show all p elements in document
</button>
<br />
<button onclick="div1ParaElems();">
Show all p elements in div1 element
</button>
<br />
<button onclick="div2ParaElems();">
show all p elements in div2 element
</button>
</body>
The Element.getElementsByTagNameNS() method returns a live HTMLCollection of elements with the given tag name belonging to the given namespace. It is similar to Document.getElementsByTagNameNS, except that its search is restricted to descendants of the specified element.
getElementsByTagNameNS(namespaceURI, localName)
Parameters:
namespaceURI : is the namespace URI of elements to look for. For example, if you need to look for XHTML elements, use the XHTML namespace URI, http://www.w3.org/1999/xhtml.
localName : is either the local name of elements to look for or the special value "*", which matches all elements.
// Check the alignment on a number of cells in a table in an XHTML document.
const table = document.getElementById("forecast-table");
const cells = table.getElementsByTagNameNS(
"http://www.w3.org/1999/xhtml",
"td"
);
for (const cell of cells) {
const axis = cell.getAttribute("axis");
if (axis === "year") {
// Grab the data
}
}