JavaScript getElementsByTagName

摘要：在本教程中，您将学习如何使用 JavaScript getElementsByTagName() 选择具有给定标签名的元素。

JavaScript getElementsByTagName() 方法简介

getElementsByTagName() 是 document 对象或特定 DOM 元素的一种方法。

getElementsByTagName() 方法接受一个标签名，并返回一个实时 HTMLCollection，其中包含在文档中出现的匹配标签名的元素，顺序与其在文档中的顺序一致。

以下说明了 getElementsByTagName() 的语法：

let elements = document.getElementsByTagName(tagName);Code language: JavaScript (javascript)

getElementsByTagName() 的返回值集合是实时的，这意味着当具有匹配标签名的元素添加到文档中或从文档中删除时，它会自动更新。

请注意，HTMLCollection 是一个类似数组的对象，类似于函数的 arguments 对象。

JavaScript getElementsByTagName() 示例

以下示例说明了如何使用 getElementsByTagName() 方法获取文档中 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>Code language: HTML, XML (xml)

工作原理

首先，使用 getElementById() 方法选择计算 H2 按钮。
其次，将按钮的单击事件挂接到匿名函数。
第三，在匿名函数中，使用 document.getElementsByTagName() 获取 H2 标签列表。
最后，使用 alert() 函数显示 H2 标签的数量。

摘要

getElementsByTagName() 是 document 或 element 对象的一种方法。
getElementsByTagName() 接受一个标签名，并返回一个具有匹配标签名的元素列表。
getElementsByTagName() 返回一个实时 HTMLCollection 元素。HTMLCollection 是一个类似数组的对象。

测验

本教程是否有帮助？