正文

JavaScript原生方法获取元素class的标题可以是：“轻松掌握：纯JS获取元素类名的5种方法”。

/0 浏览量
0914

在Web开发中，操作元素的类名（class）是一项基本且常用的技能。JavaScript为我们提供了多种方法来获取元素的类名。以下，我将详细介绍五种纯JavaScript获取元素类名的方法，帮助您在实际开发中更加得心应手。

方法一：使用.className属性

这是最直接获取元素类名的方法。通过元素的className属性，我们可以轻松地读取到元素的类名。

// 假设有一个元素 <div id="myElement" class="my-class"></div>
var element = document.getElementById('myElement');
var classList = element.className;
console.log(classList); // 输出：my-class

方法二：使用.classList属性

classList属性是一个更现代的方法，它提供了一个方便的接口来操作元素的类名。通过这个属性，我们可以获取一个类名列表。

var element = document.getElementById('myElement');
var classList = element.classList;
console.log(classList[0]); // 输出：my-class

方法三：使用getElementsByClassName方法

getElementsByClassName方法可以获取所有具有指定类名的元素，返回一个HTMLCollection。虽然这个方法本身不直接获取类名，但我们可以通过遍历这个集合来获取每个元素的类名。

var elements = document.getElementsByClassName('my-class');
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].className); // 输出：my-class
}

方法四：使用querySelector或querySelectorAll方法

这两个方法允许我们通过CSS选择器来查询元素。使用querySelector可以获取匹配的第一个元素，而querySelectorAll可以获取所有匹配的元素。结合这些方法，我们可以获取元素的类名。

var element = document.querySelector('.my-class');
console.log(element.className); // 输出：my-class

var elements = document.querySelectorAll('.my-class');
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].className); // 输出：my-class
}

方法五：使用document.getElementById与getElementsByClassName结合

有时候，我们需要在特定元素下查找具有特定类名的子元素。在这种情况下，我们可以先使用getElementById获取父元素，然后使用getElementsByClassName来获取子元素。

var parentElement = document.getElementById('parent');
var childElements = parentElement.getElementsByClassName('my-class');
for (var i = 0; i < childElements.length; i++) {
    console.log(childElements[i].className); // 输出：my-class
}

通过以上五种方法，我们可以根据实际需求灵活地获取元素的类名。在开发过程中，了解这些方法的使用将有助于我们更好地管理页面的样式和行为。

-- 展开阅读全文 --