Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Document.getElementsByTagName()

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection 整个文件结构都会被搜索,包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

语法

var elements = document.getElementsByTagName(name);
  • elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection (但是看下面的提示) 。
  • name 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。
注意: 最新的 W3C 规范 说明这些元素是 HTMLCollection(HTML集合); 然而, 这个方法在WebKit内核的浏览器中返回一个 NodeList 。 更多详情请查看 bug 14869

例子

在以下的例子中,getElementsByTagName() 开始于一个具体的父级元素并且从它自上而下递归地在DOM树中搜索符合标签名称参数的子元素。

注意调用 getElementsByTagName() 的不是那个文件节点 document,事实上是使用这个方法 element.getElementsByTagName()

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

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

    function div2ParaElems() {
      var div2 = document.getElementById("div2");
      var div2Paras = div2.getElementsByTagName("p");
      var 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() 在那种情况下会有用. 请查看 bug 499656

document.getElementsByTagName() 类似于 element.getElementsByTagName(),除了它会搜索整个文档这点。

参考

文档标签和贡献者

 此页面的贡献者: xgqfrms, jethro2016
 最后编辑者: xgqfrms,