JavaScript 按标签名称获取元素

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 是一个类似数组的对象。