使用JS获取页面上的所有标签

编程基础网 Java开发

2023-12-16

获取页面上的所有标签是一个常见的任务，我们可以使用JavaScript来完成这个任务。下面是几个步骤，讲解如何使用JS获取页面上的所有标签。

获取页面上的所有标签是一个常见的任务，我们可以使用JavaScript来完成这个任务。下面是几个步骤，讲解如何使用JS获取页面上的所有标签。

获取Html页面中的所有标签

可以使用 document.getElementsByTagName('tagname') 方法来获取指定标签名的所有标签，其中 tagname 是标签名。例如，以下代码将获取所有的 <p> 标签：

var allParagraphs = document.getElementsByTagName('p');
console.log(allParagraphs);

获取Html页面中的所有类名相同的标签

可以使用 document.getElementsByClassName('classname') 方法来获取指定类名的所有标签，其中 classname 是类名。例如，以下代码将获取所有类名为 example 的标签：

var allExamples = document.getElementsByClassName('example');
console.log(allExamples);

示例：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取页面上的所有标签</title>
        <style>
            .example {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <p>这是一个段落。</p>
        <p class="example">这个段落的文本是红色的。</p>
        <div class="example">这个 div 的文本也是红色的。</div>
    </body>
</html>

JavaScript代码：

var allTags = document.getElementsByTagName('*');
console.log(allTags);

var allExamples = document.getElementsByClassName('example');
console.log(allExamples);

以上代码将获取所有的标签和所有类名为 example 的标签。

编程基础网

本文标题为：使用JS获取页面上的所有标签