Document.getElementsByTagName()

在此页

句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题

getElementsByTagName 方法为 Document interface 返回 HTMLCollection 若元素具有给定标签名称。搜索完整文档，包括根节点。返回的 HTMLCollection 是实时的，意味着它会自动更新自身以与 DOM 树保持同步，不必调用 document.getElementsByTagName() 再次。

句法

var elements = document.getElementsByTagName(name);

元素 是实时 HTMLCollection (但请参阅以下注意事项) 找到的元素按照它们在树中出现的次序排列。
名称 是表示元素名称的字符串。特殊字符串 * 表示所有元素。

最新 W3C 规范说 元素 是


							HTMLCollection

；不管怎样，此方法返回


								NodeList

在 WebKit 浏览器。见 bug 14869 了解细节。

范例

在以下范例中， getElementsByTagName() starts from a particular parent element and searches top-down recursively through the DOM from that parent element, building a collection of all descendant elements which match the tag 名称 parameter. This demonstrates both document.getElementsByTagName() and the functionally identical Element.getElementsByTagName() , which starts the search at a specific element within the DOM tree.

点击按钮使用 getElementsByTagName() to count the descendant paragraph elements of a particular parent (either the document itself or one of two nested <div> 元素)。

<!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>

注意事项

When called on an HTML document, getElementsByTagName() lower-cases its argument before proceeding. This is undesirable when trying to match camelCase SVG elements in a subtree in an HTML document. document.getElementsByTagNameNS() is useful in that case. See also bug 499656 .

document.getElementsByTagName() 类似于 Element.getElementsByTagName() , except that its search encompasses the whole document.

规范

规范	状态	注释
DOM The definition of 'document.getElementsByTagName' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getElementsByTagName`	Chrome 1	Edge 12	Firefox 1	IE 5	Opera 5.1	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

另请参阅

Element.getElementsByTagName()
document.getElementById() to return a reference to an element by its id
document.getElementsByName() to return a reference to an element by its 名称
document.querySelector() for powerful selectors via queries like 'div.myclass'

元数据

最后修改： Jan 2, 2020

在此页

句法

范例

注意事项

规范

浏览器兼容性

图例

另请参阅

相关话题