JavaScript 按标签名称获取元素
getElementsByTagName 是 document 对象获取 DOM 元素的方法之一，getElementsByTagName 方法接受标签名称，返回与标签名称匹配的元素集合
2 min read
By
myfreax
在本教程中，您将学习如何使用 JavaScript getElementsByTagName 来使用指定标签名称获取元素。
JavaScript getElementsByTagName 方法简介
getElementsByTagName 是 document 对象获取 DOM 元素的方法之一。getElementsByTagName 方法接受标签名称，并按照它们在 HTML 文档中出现的顺序返回与指定标签名称匹配的元素集合 HTMLCollection。
下面是 getElementsByTagName 的语法：
let elements = document.getElementsByTagName(tagName);getElementsByTagName 返回的元素集合 HTMLCollection 是实时的，这意味着当在文档中添加和/或删除与指定标签名称匹配的元素时，它会自动更新。类似于双向绑定。
请注意，HTMLCollection 是一个类似数组的对象，就像函数的 arguments 对象一样。
JavaScript getElementsByTagName 示例
下面的例子说明如何使用 getElementsByTagName 方法获取 HTML 文档 H2 标签的数量。
当您点击计算 H2 按钮时，页面会显示 H2 标签的数量：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript getElementsByTagName() Demo</title>
</head>
<body>
<h1>JavaScript getElementsByTagName() Demo</h1>
<h2>First heading</h2>
<p>This is the first paragraph.</p>
<h2>Second heading</h2>
<p>This is the second paragraph.</p>
<h2>Third heading</h2>
<p>This is the third paragraph.</p>
<button id="btnCount">Count H2</button>
<script>
let btn = document.getElementById('btnCount');
btn.addEventListener('click', () => {
let headings = document.getElementsByTagName('h2');
alert(`The number of H2 tags: ${headings.length}`);
});
</script>
</body>
</html>代码是如何运行的：
- 首先，使用
getElementById方法选择按钮 Count H2 。 - 其次，为按钮添加点击事件。
- 第三，在匿名函数中，使用
document.getElementsByTagName来获取H2标签的集合。 - 最后，使用
alert()函数显示H2标签的数量。
结论
getElementsByTagName() 是 document 对象或 element 对象的方法。getElementsByTagName() 接受标签名称并返回与标签名称匹配的元素集合 HTMLCollection。
getElementsByTagName 返回实时的 HTMLCollection 。HTMLCollection 是一个类似数组的对象。
