Document: getElementsByTagNameNS() 方法

返回属于给定命名空间的具有给定标签名的元素列表。将搜索整个文档，包括根节点。

语法

getElementsByTagNameNS(namespace, name)

参数

命名空间: 要查找的元素的命名空间 URI（请参见 element.namespaceURI）。
名称: 要查找的元素的本地名称，或者特殊值 *，它匹配所有元素（请参见 element.localName）。

返回值

在树中出现的顺序中找到的元素的实时 NodeList（但请参见下面的说明）。

注意：虽然 W3C 规范说返回值是 NodeList，但此方法在 Firefox 中返回 HTMLCollection。Opera 返回 NodeList，但实现了 namedItem 方法，这使其类似于 HTMLCollection。截至 2012 年 1 月，只有在 WebKit 浏览器中，返回值才是纯粹的 NodeList。有关详细信息，请参见错误 14869。

注意：目前，此方法中的参数区分大小写，但在 Firefox 3.5 及更早版本中则不区分大小写。有关详细信息，请参见 Firefox 3.6 开发人员发行说明以及 Element.getElementsByTagNameNS 中“浏览器兼容性”部分的说明。

示例

在以下示例中，getElementsByTagNameNS 从特定的父元素开始，并从该父元素递归地自上而下搜索 DOM，寻找与标签 name 参数匹配的子元素。

请注意，当调用 getElementsByTagName 的节点不是 document 节点时，实际上使用的是 element.getElementsByTagNameNS 方法。

要使用以下示例，只需将其复制并粘贴到以 .xhtml 扩展名保存的新文件中。

html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>getElementsByTagNameNS example</title>

    <script>
      function getAllParaElems() {
        const allParas = document.getElementsByTagNameNS(
          "http://www.w3.org/1999/xhtml",
          "p",
        );
        const num = allParas.length;
        alert(`There are ${num} &lt;p&gt; 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} &lt;p&gt; 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} &lt;p&gt; elements in div2 element`);
      }
    </script>
  </head>

  <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>
</html>

规范

规范
DOM 标准 # ref-for-dom-document-getelementsbytagnamens①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Element.getElementsByTagNameNS()