在前端开发中，我们经常需要通过元素的类名来获取一组相关的DOM元素。本文将介绍如何使用JavaScript和jQuery两种方法来获取所有具有相同类名的元素，并提供详细的代码示例以及一些实用技巧。
1. 使用JavaScript获取元素
在JavaScript中，可以使用 getElementsByClassName() 方法来获取页面上所有具有指定类名的元素。该方法返回一个HTMLCollection对象，其中包含所有符合条件的元素。
const elements = document.getElementsByClassName("classname");该方法接收一个参数，即所需查询的类名。如果要获取多个类名，可以使用空格分隔它们。
const elements = document.getElementsByClassName("class1 class2");但是需要注意的是，getElementsByClassName() 返回的是一个类数组对象，而不是单独的节点列表。因此，无法直接使用数组的方法对其进行操作。如果需要对结果进行循环或其他迭代操作，需要先将其转换为一个真正的数组。
const elementsArray = Array.from(elements);
elementsArray.forEach((element) => {
// do something with each element
});2. 使用jQuery获取元素
jQuery是一款广泛使用的JavaScript库，它提供了更简洁、易读的方式来操纵DOM元素。使用jQuery获取所有具有相同类名的元素非常简单。只需使用 $(".classname") 即可获取所有符合条件的元素。
const elements = $(".classname");与使用原生JavaScript方法不同，jQuery返回一个jQuery对象，其中包含所有匹配的元素。可以通过循环或其他jQuery方法来处理这些元素。
$(".classname").each(function () {
// do something with each element
});3. 实用技巧
在实际开发中，我们经常需要对元素进行特定的操作，例如根据类名添加样式、修改内容等。以下是一些使用类名操作元素的实用技巧。
3.1. 添加/删除类名
可以使用 classList 属性来添加或删除元素的类名。该属性返回一个DOMTokenList对象，其中包含该元素的所有类名。可以使用 add() 方法向其添加新类名，使用 remove() 方法删除现有类名。
const element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");3.2. 修改样式
可以使用 style 属性直接修改元素的CSS样式。该属性返回一个CSSStyleDeclaration对象，其中包含该元素的所有样式属性。可以通过修改属性值来改变元素的外观。
const element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "16px";3.3. 修改内容
可以使用 innerHTML 或 textContent 属性来修改元素的内容。innerHTML 可以设置HTML标记，而 textContent 则只能设置文本内容。
const element = document.getElementById("myElement");
element.innerHTML = "<p>New content</p>";
element.textContent = "New text content";4. 总结
获取所有具有相同类名的元素是前端开发中常见的任务。本文介绍了使用JavaScript和jQuery两种方法来实现该功能，并提供了一些实用技巧来操作这些元素。希望本文能够帮助读者更好地处理DOM元素，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25574