js 标签选择器|极客笔记

js 标签选择器

在网页开发中，经常会使用到 JavaScript 来操作文档中的元素。而标签选择器就是一种常用的选择器，它可以通过标签的名称来选择相应的元素。本文将详细介绍如何使用 js 标签选择器来操作文档中的元素。

基本语法

使用标签选择器的基本语法如下：

document.getElementsByTagName(tagName);

其中 tagName 表示要选择的标签名称，可以是任意的 HTML 标签名称。这个方法会返回一个包含所有指定标签的元素的 HTMLCollection 对象。如果没有匹配的元素，则返回一个空的 HTMLCollection 对象。

示例

接下来，我们通过一个简单的示例来演示如何使用标签选择器来获取页面中的所有 div 元素。

<!DOCTYPE html>
<html>
<head>
    <title>标签选择器示例</title>
</head>
<body>
    <div>第一个 div 元素</div>
    <div>第二个 div 元素</div>
    <div>第三个 div 元素</div>

    <script>
        // 选择所有的 div 元素
        var divs = document.getElementsByTagName("div");

        // 遍历所有选中的元素
        for (var i = 0; i < divs.length; i++) {
            console.log(divs[i].innerHTML);
        }
    </script>
</body>
</html>

在上面的示例中，我们使用 getElementsByTagName 方法选择了页面中的所有 div 元素，并通过遍历打印出了每个 div 元素的内部内容。