JS class选择器|极客笔记

JS class选择器

在使用JavaScript编写前端代码时，我们经常需要对HTML中的元素进行操作和样式的修改。其中，选择器是一种非常重要的工具，它可以帮助我们定位到指定的元素，从而进行相应的操作。本文将详细介绍JS中的class选择器的使用方法和常见应用场景。

1. 什么是class选择器？

在HTML中，我们可以为元素添加一个或多个类名（class name）。类名是为了方便对元素进行分类和样式的统一定义。而class选择器则是通过类名来选取元素的一种方式。

class选择器的语法为.classname，其中classname为要选取的元素的类名。

2. class选择器的基本用法

在JavaScript中，我们可以使用document.getElementsByClassName(classname)方法来选取指定类名的元素。这个方法返回的是一个NodeList对象，可以通过下标访问到每一个被选中的元素。

示例代码如下：

// HTML
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

// JavaScript
var boxes = document.getElementsByClassName("box");
for (var i = 0; i < boxes.length; i++) {
    console.log(boxes[i].innerHTML);
}

运行结果：

Box 1
Box 2
Box 3

通过document.getElementsByClassName("box")选取到了所有类名为”box”的元素，并使用循环输出了每个元素的innerHTML。

3. class选择器的高级用法

除了使用document.getElementsByClassName(classname)方法，我们还可以使用更丰富的class选择器，例如document.querySelector(selector)或document.querySelectorAll(selector)。这两个方法可以接受更复杂的选择器作为参数，使我们可以更精确地选取元素。

3.1 querySelector方法

document.querySelector(selector)方法返回匹配到的第一个元素，其参数selector可以是任意有效的选择器。

示例代码如下：

// HTML
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

// JavaScript
var box = document.querySelector(".box");
console.log(box.innerHTML);

运行结果：

Box 1

通过document.querySelector(".box")选取到类名为”box”的第一个元素，并输出了其innerHTML。

3.2 querySelectorAll方法

document.querySelectorAll(selector)方法返回匹配到的所有元素组成的NodeList对象，其参数selector也可以是任意有效的选择器。

示例代码如下：

// HTML
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

// JavaScript
var boxes = document.querySelectorAll(".box");
for (var i = 0; i < boxes.length; i++) {
    console.log(boxes[i].innerHTML);
}

运行结果：

Box 1
Box 2
Box 3

通过document.querySelectorAll(".box")选取到了所有类名为”box”的元素，并使用循环输出了每个元素的innerHTML。

4. class选择器的应用场景

class选择器在实际开发中有很多应用场景，下面将介绍一些常见的应用场景。

4.1 修改元素样式

通过class选择器，我们可以选取到指定类名的元素，并对其进行样式的修改。通过修改元素的className属性，我们可以为元素添加或删除类名，进而改变元素的样式。

示例代码如下：

// HTML
<div id="box" class="blue">Box</div>

// CSS
.blue {
    color: blue;
}

// JavaScript
var box = document.getElementById("box");
box.className += " bold";

运行结果：元素的文字颜色变为蓝色，并且变为粗体。

4.2 动态创建和操作元素

通过class选择器，我们可以选取到指定类名的元素，并进行动态创建和操作。通过createElement方法创建新的元素，通过appendChild方法将它添加到指定的位置。

示例代码如下：

// HTML
<div id="container"></div>

// JavaScript
var container = document.getElementById("container");
var div = document.createElement("div");
div.className = "box";
div.innerHTML = "New Box";
container.appendChild(div);

运行结果：在id为”container”的元素内部添加了一个新的带有类名”box”的div元素。