正文

揭秘JS原生获取元素类名的5种方法，快速掌握原生JavaScript技巧

/0 浏览量
0905

在原生JavaScript中，获取元素的类名是一个基础而又重要的操作。无论是进行样式修改、事件绑定还是DOM操作，正确获取元素类名都是实现功能的关键。以下是五种常用的方法，帮助你快速掌握获取元素类名的技巧。

方法一：使用 Element.className 属性

这是最直接的方法，可以直接访问元素的 className 属性来获取类名。

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

方法二：使用 Element.classList 属性

classList 属性提供了操作类名的方法，其中 classList.value 属性可以获取完整的类名字符串。

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

方法三：使用 Element.getAttribute('class')

虽然这种方法不如前两种直接，但它允许你获取到元素的所有属性，包括类名。

var element = document.getElementById('myElement');
var classAttribute = element.getAttribute('class'); // 返回 "my-class"

方法四：使用正则表达式

如果你需要处理更复杂的类名获取，可以使用正则表达式来提取所需的类名。

var element = document.getElementById('myElement');
var className = element.className.match(/\S+/g); // 返回 ["my-class"]

方法五：使用 querySelector 和 CSS选择器

这种方法稍微复杂一些，但可以让你通过CSS选择器直接获取到类名。

var classList = document.querySelector('.my-class').classList.value; // 返回 "my-class"

实战示例

以下是一个简单的HTML示例，展示了如何使用这些方法：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Class Name Examples</title>
</head>
<body>
    <div id="myElement" class="my-class another-class">Hello, World!</div>

    <script>
        // 方法一
        var element1 = document.getElementById('myElement');
        console.log(element1.className); // "my-class another-class"

        // 方法二
        var element2 = document.getElementById('myElement');
        console.log(element2.classList.value); // "my-class another-class"

        // 方法三
        var element3 = document.getElementById('myElement');
        console.log(element3.getAttribute('class')); // "my-class another-class"

        // 方法四
        var element4 = document.getElementById('myElement');
        console.log(element4.className.match(/\S+/g)); // ["my-class", "another-class"]

        // 方法五
        console.log(document.querySelector('.my-class').classList.value); // "my-class"
    </script>
</body>
</html>

通过上述五种方法，你可以灵活地根据需求获取元素的类名，从而在JavaScript的DOM操作中更加得心应手。记住，选择最适合你当前任务的方法，可以让你的代码更加高效和易读。

-- 展开阅读全文 --