在本教程中,您将学习如何使用 JavaScript getElementsByTagName 来使用指定标签名称获取元素。

JavaScript getElementsByTagName 方法简介

getElementsByTagNamedocument 对象获取 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 返回实时的 HTMLCollectionHTMLCollection 是一个类似数组的对象。