正文

轻松掌握：JavaScript原生获取元素类名的几种方法

/0 浏览量
0917

在JavaScript中，获取元素的类名是一个基础且常用的操作。掌握多种获取元素类名的方法可以帮助你在开发中更加灵活地处理DOM。下面，我将详细介绍几种原生JavaScript中获取元素类名的方法。

方法一：使用 .className 属性

这是最简单直接的方法。每个HTML元素都有一个 className 属性，可以直接访问到元素的类名。

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

方法二：使用 .classList 属性

classList 是一个DOMTokenList对象，包含了元素的类名列表。使用它可以通过多种方法来获取类名。

2.1 直接访问 .classList.value

var element = document.getElementById('myElement');
var classListValue = element.classList.value; // 返回 "my-class another-class"

2.2 使用 .classList.item(index)

你可以通过索引来获取类名列表中的特定类名。

var element = document.getElementById('myElement');
var classOne = element.classList.item(0); // 返回 "my-class"

2.3 使用 .classList.contains(class) 检查是否存在某个类名

var element = document.getElementById('myElement');
var hasClass = element.classList.contains('another-class'); // 返回 true 或 false

方法三：使用正则表达式

如果你需要从元素的 className 属性中提取特定的类名，可以使用正则表达式。

var element = document.getElementById('myElement');
var className = element.className;
var classRegex = /my-class/; // 创建一个匹配 "my-class" 的正则表达式
var classMatch = className.match(classRegex); // 返回匹配到的数组或 null
var classOne = classMatch ? classMatch[0] : null; // 获取匹配到的类名或 null

方法四：使用 getElementsByClassName 方法

虽然这个方法主要用于获取所有具有特定类名的元素，但也可以用来获取第一个匹配的元素，并从中获取类名。

var elements = document.getElementsByClassName('my-class');
var firstElement = elements[0]; // 获取第一个匹配的元素
var className = firstElement.className; // 返回 "my-class"

通过以上几种方法，你可以根据实际需求选择最合适的方式来获取元素的类名。掌握这些方法将使你在处理DOM时更加得心应手。

-- 展开阅读全文 --