用原生JS获取CLASS对象(很简单实用)

获取CLASS对象是在JavaScript中非常常见的操作，本文将为您介绍如何使用原生JavaScript获取CLASS对象，以及如何操作对象。

1. 获取CLASS对象

首先，让我们来看一下如何使用原生JavaScript获取CLASS对象。在HTML中，我们使用class属性为元素设置类，例如：

<div class="box">这是一个盒子</div>

针对上述HTML元素，我们可以使用以下的JavaScript代码获取它的CLASS对象：

// 通过 class 名称获取元素
var boxObj = document.getElementsByClassName("box");

// 输出对象，查看结果
console.log(boxObj);

可以看到，我们使用了 getElementsByClassName() 这个函数来获取元素，该函数返回一个数组，这个数组中包含设置了指定 class 属性的所有元素。

如果有多个元素设置了相同的class属性，那么会返回多个元素。

2. 操作CLASS对象

有了获取CLASS对象的技能后，接下来我们再来看一些如何操作获取到的对象的操作。下面将分两个示例来详细讲解。

2.1 示例1：为元素添加类

在前面我们已经获取了一个名为 box 的元素。现在我们来介绍如何为该元素添加类。

以下是代码示例：

// 获取 CLASS 对象
var boxObj = document.getElementsByClassName("box");

// 给元素添加类
boxObj[0].classList.add("new-box");

// 输出查看结果
console.log(boxObj);

在以上示例代码中，我们使用了 classList 属性来给元素添加类。add() 方法可以用来添加对应的类，这里我们添加了一个名为 new-box 的新类。

执行完以上代码后，我们打开浏览器开发者工具可以看到该元素已经添加上了新的类。

2.2 示例2：删除元素类

在接下来的这个示例中，我们将为获取到的CLASS对象删除一个指定的类。以下是代码示例：

// 获取 CLASS 对象
var boxObj = document.getElementsByClassName("box");

// 删除元素类
boxObj[0].classList.remove("box");

// 输出查看结果
console.log(boxObj);

在示例代码中，我们使用了 classList 属性来删掉元素的一个类，可以看到我们使用了 remove() 方法来指定要删除的类名。

执行以上代码后，我们打开浏览器开发者工具可以看到该元素的class属性已经删掉了 box 这个类名。

总结

以上就是关于如何使用原生JavaScript获取CLASS对象的攻略。在此基础上，我们也学习了如何添加和删除元素的类，这些都是常见的操作技能。

希望这篇文章对你有所帮助。