正文

JavaScript原生方法获取元素class的几种方式：

/0 浏览量
0923

在JavaScript中，获取元素的class属性是进行DOM操作的一个基本技能。以下是一些常用的方法来获取元素的class：

1. 使用Element.className属性

这是最直接获取元素class的方法。className属性会返回元素的完整类名字符串。

// 假设有一个元素 <div id="myDiv" class="my-class another-class"></div>
var div = document.getElementById('myDiv');
var classes = div.className; // 返回 "my-class another-class"

2. 使用Element.classList属性

classList属性是一个DOMTokenList对象，包含了元素的类名。它提供了多种方法来操作类名，包括获取类名。

// 假设有一个元素 <div id="myDiv" class="my-class another-class"></div>
var div = document.getElementById('myDiv');
var classes = div.classList; // 返回一个DOMTokenList对象

// 获取第一个类名
var firstClass = classes.item(0); // 返回 "my-class"

// 获取所有类名
var allClasses = Array.from(classes); // 返回一个包含所有类名的数组 ["my-class", "another-class"]

classList属性提供的方法：

  • classList.add(classnames): 添加一个或多个类名到元素上。
  • classList.remove(classnames): 从元素上移除一个或多个类名。
  • classList.toggle(classname): 如果元素上有这个类名则移除它，如果没有则添加它。
  • classList.contains(classname): 检查元素是否包含指定的类名。

3. 使用Element.getAttribute('class')

虽然不是直接获取类名的方法，但getAttribute方法可以用来获取元素的class属性值。

// 假设有一个元素 <div id="myDiv" class="my-class another-class"></div>
var div = document.getElementById('myDiv');
var classes = div.getAttribute('class'); // 返回 "my-class another-class"

4. 使用Element.querySelector('.class-name')或Element.querySelectorAll('.class-name')

如果你需要根据类名获取元素，可以使用querySelector或querySelectorAll方法，但它们并不直接返回类名，而是返回匹配的元素。

// 获取所有具有特定类名的元素
var elements = document.querySelectorAll('.my-class');

// elements 将是一个包含所有具有 'my-class' 类的元素的NodeList

这些方法各有特点，你可以根据具体的需求选择最合适的方法来获取元素的class。

-- 展开阅读全文 --