Document：getElementsByTagName() 方法
Document 接口的 getElementsByTagName 方法返回一个动态的 HTMLCollection，其中包含指定标签名的所有元素。
搜索范围包括整个文档，也包括根节点。返回的 HTMLCollection 是动态的，这意味着它会自动更新以与 DOM 树保持同步，而无需再次调用 document.getElementsByTagName()。
语法
getElementsByTagName(name)
参数
name-
一个表示元素名称的字符串。特殊字符串
*代表所有元素。
返回值
一个动态的 HTMLCollection，包含了按在树中出现的顺序排列的已找到的元素。
示例
在下面的示例中，getElementsByTagName() 从一个特定的父元素开始，并从该父元素开始在 DOM 中递归地自上而下搜索，构建一个所有与标签 name 参数匹配的后代元素的集合。这演示了 document.getElementsByTagName() 和功能上完全相同的 Element.getElementsByTagName()，后者从 DOM 树中的特定元素开始搜索。
点击按钮会使用 getElementsByTagName() 来计算特定父元素（文档本身或两个嵌套的 <div> 元素之一）的后代段落元素的数量。
<p>Some outer text</p>
<p>Some outer text</p>
<div id="div1">
<p>Some div1 text</p>
<p>Some div1 text</p>
<p>Some div1 text</p>
<div id="div2">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p>Some outer text</p>
<p>Some outer text</p>
<button id="btn1">Show all p elements in document</button>
<br />
<button id="btn2">Show all p elements in div1 element</button>
<br />
<button id="btn3">Show all p elements in div2 element</button>
body {
border: solid green 3px;
}
#div1 {
border: solid blue 3px;
}
#div2 {
border: solid red 3px;
}
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`);
}
document.getElementById("btn1").addEventListener("click", getAllParaElems);
document.getElementById("btn2").addEventListener("click", div1ParaElems);
document.getElementById("btn3").addEventListener("click", div2ParaElems);
注意
当在 HTML 文档上调用时，getElementsByTagName() 会在继续操作前将其参数转换为小写。当试图在 HTML 文档的子树中匹配驼峰式 SVG 元素时，这并不理想。在这种情况下，document.getElementsByTagNameNS() 就很有用。另请参阅 Firefox bug 499656。
document.getElementsByTagName() 与 Element.getElementsByTagName() 类似，只是其搜索范围涵盖整个文档。
规范
| 规范 |
|---|
| DOM # dom-document-getelementsbytagname 的相关引用① |
浏览器兼容性
加载中…
另见
Element.getElementsByTagName()document.getElementById()：通过id返回对元素的引用document.getElementsByName()：通过name返回对元素的引用document.querySelector()：通过诸如'div.myclass'等查询来实现强大的选择器功能