Document：getElementsByTagName() 方法

getElementsByTagName 方法是 Document 接口的一个方法，它返回一个包含具有给定标签名称的元素的 HTMLCollection。

它会搜索整个文档，包括根节点。返回的 HTMLCollection 是动态的，这意味着它会自动更新自身以与 DOM 树保持同步，而无需再次调用 document.getElementsByTagName()。

语法

js
getElementsByTagName(name)

参数

name

表示元素名称的字符串。特殊字符串 * 代表所有元素。

返回值

一个动态的 HTMLCollection，其中包含找到的元素，按其在树中出现的顺序排列。

注意： 最新的 W3C 规范 指出返回值为 HTMLCollection；但是，此方法在 WebKit 浏览器中返回 NodeList。有关详细信息，请参阅 Firefox 错误 14869。

示例

在以下示例中，getElementsByTagName() 从特定的父元素开始，并从该父元素递归自上而下地遍历 DOM，构建一个包含所有与标签 name 参数匹配的后代元素的集合。这演示了 document.getElementsByTagName() 和功能相同的 Element.getElementsByTagName()，后者从 DOM 树中的特定元素开始搜索。

单击按钮使用 getElementsByTagName() 统计特定父元素（文档本身或两个嵌套的 <div> 元素之一）的后代段落元素。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
      function getAllParaElems() {
        const allParas = document.getElementsByTagName("p");
        const num = allParas.length;
        alert(`There are ${num} paragraph in this document`);
      }

      function div1ParaElems() {
        const div1 = document.getElementById("div1");
        const div1Paras = div1.getElementsByTagName("p");
        const num = div1Paras.length;
        alert(`There are ${num} paragraph in #div1`);
      }

      function div2ParaElems() {
        const div2 = document.getElementById("div2");
        const div2Paras = div2.getElementsByTagName("p");
        const num = div2Paras.length;
        alert(`There are ${num} paragraph in #div2`);
      }
    </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>

注释

当在 HTML 文档上调用时，getElementsByTagName() 会在继续之前将其参数转换为小写。当尝试在 HTML 文档中的子树中匹配 驼峰式大小写 SVG 元素时，这并不理想。在这种情况下，document.getElementsByTagNameNS() 很有用。另请参阅 Firefox 错误 499656。

document.getElementsByTagName() 与 Element.getElementsByTagName() 类似，只是其搜索范围涵盖整个文档。

规范

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

浏览器兼容性

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

另请参阅