极客笔记剖析JavaScript中获取class属性值的方法
1. 引言
在前端开发中，我们经常需要通过JavaScript获取元素的class属性值。获取class属性值可以帮助我们实现各种功能，例如通过class选择器样式更新、动态操作DOM等。本文将详细剖析JavaScript中获取class属性值的方法，为读者提供全面的指导和实践示例。
2. getElementByClassName方法
一个元素可以有多个class属性，而getElementByClassName方法正是为了获取具有指定class的元素而存在的。该方法返回一个包含所有指定class元素的HTMLCollection对象。
语法：
document.getElementsByClassName(classValue)
参数说明：
- classValue：指定的class值。可以是单个class值，也可以是多个class值，用空格分隔。
示例代码：
<!DOCTYPE html>
<html>
<body>
<div class="container">
<p class="red">红色文字</p>
<p class="blue">蓝色文字</p>
<p class="red">再次出现的红色文字</p>
</div>
<script>
var elements = document.getElementsByClassName("red");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
</script>
</body>
</html>
运行结果：
红色文字
再次出现的红色文字
上述示例中，我们通过getElementByClassName方法获取所有class为”red”的元素，然后遍历输出它们的innerText。通过这种方法，我们可以方便地获取具有指定class的元素，并对其进行进一步的处理。
需要注意的是，getElementByClassName方法返回的是一个HTMLCollection对象，并非一个数组。所以如果想要对其进行数组方法的操作，需要先将其转换成数组，例如使用Array.from方法。
3. querySelectorAll方法
除了getElementByClassName方法，我们还可以使用querySelectorAll方法来获取具有指定class的元素。querySelectorAll方法是通过CSS选择器语法来选取元素。
语法：
document.querySelectorAll(selector)
参数说明：
- selector：CSS选择器字符串。
示例代码：
<!DOCTYPE html>
<html>
<body>
<div class="container">
<p class="red">红色文字</p>
<p class="blue">蓝色文字</p>
<p class="red">再次出现的红色文字</p>
</div>
<script>
var elements = document.querySelectorAll(".red");
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
</script>
</body>
</html>
运行结果：
红色文字
再次出现的红色文字
querySelectorAll方法返回的是一个NodeList对象，与HTMLCollection相似，也是类数组对象。因此，如果想要对其进行数组方法的操作，同样需要先将其转换成数组。
需要注意的是，querySelectorAll方法比getElementByClassName方法更灵活，可以通过更多的选择器语法来获取元素。例如，可以使用类似”.red.blue”的选择器，来选取同时具有”red”和”blue” class的元素。
4. getElementById方法
getElementById方法是根据元素的id属性值来获取元素。一个页面上，id属性值应该是唯一的。因此，我们可以直接使用getElementById方法获取具有指定id的元素。
语法：
document.getElementById(id)
参数说明：
- id：指定的id值。
示例代码：
<!DOCTYPE html>
<html>
<body>
<div id="container">
<p id="red-text">红色文字</p>
<p id="blue-text">蓝色文字</p>
<p id="red-text">再次出现的红色文字</p>
</div>
<script>
var element = document.getElementById("red-text");
console.log(element.innerText);
</script>
</body>
</html>
运行结果：
红色文字
上述示例中，我们通过getElementById方法获取具有指定id的元素，并输出其innerText。getElementById方法返回的是一个唯一的元素。
5. getAttribute方法
除了直接获取class属性值的方法之外，我们还可以使用getAttribute方法来获取元素的任意属性值，包括class属性。getAttribute方法接受属性名作为参数，返回指定属性名的属性值。
语法：
element.getAttribute(attributeName)
参数说明：
- attributeName：指定的属性名，字符串格式。
示例代码：
<!DOCTYPE html>
<html>
<body>
<p class="red" id="my-paragraph">红色文字</p>
<script>
var element = document.getElementById("my-paragraph");
var classValue = element.getAttribute("class");
console.log(classValue);
</script>
</body>
</html>
运行结果：
red
上述示例中，我们通过getAttribute方法获取id为”my-paragraph”的元素的class属性值，并将其输出。通过这种方式，我们可以获取元素的任意属性值，包括class。
需要注意的是，通过getAttribute方法获取的class属性值是一个字符串，包括所有应用到元素的class值。如果需要对其进行更多的处理，例如判断某个class是否存在，可以使用字符串方法或正则表达式来进行分割和匹配。
6. classList属性
除了上述方法之外，我们还可以使用classList属性来获取元素的class属性值。classList属性返回一个DOMTokenList对象，该对象提供了一系列方法用于操作元素的class。
示例代码：
<!DOCTYPE html>
<html>
<body>
<p class="red blue">红蓝文字</p>
<script>
var element = document.querySelector("p");
var classList = element.classList;
console.log(classList);
</script>
</body>
</html>
运行结果：
DOMTokenList ["red", "blue", value: "red blue"]
上述示例中，我们通过classList属性获取元素的class属性值，然后将其输出。可以看到，classList属性返回的是一个DOMTokenList对象，该对象包含元素的每个class值。
通过classList属性，我们可以方便地操作元素的class。例如，可以使用add方法添加一个新的class，使用remove方法移除一个class，使用toggle方法切换某个class的状态。
总结：
- getElementByClassName方法：通过类名获取元素的集合，返回一个HTMLCollection对象。
- querySelectorAll方法：通过指定CSS选择器获取元素的集合，返回一个NodeList对象。
- getElementById方法：通过id属性值获取元素，返回一个唯一的元素。
- getAttribute方法：通过属性名获取元素的任意属性值，返回一个字符串。
- classList属性：返回一个DOMTokenList对象，提供了操作元素class的一系列方法。
以上是JavaScript中获取class属性值的方法的详细剖析。不同的方法适用于不同的场景，读者可以根据具体需求选择合适的方法来获取元素的class属性值。