在前端开发中，我们经常需要操作 DOM 元素。其中，按类名获取元素是一项非常常见的操作，例如用于实现交互效果或修改样式等。本文将介绍如何使用 JavaScript 在页面中按类名获取元素。
getElementByClassName()
getElementByClassName() 方法可用于按类名获取元素。该方法返回一个 HTMLCollection 对象，它包含了所有指定类名的元素。
-- -------------------- ---- ------- ---- ---- -- --- ---- --- ----------------- ------ --- ----------------- ------ --- ----------- ------------ ------ -------- ------ ----- -------- ----- ----- - ---------------------------------------- ------------------- ---------
输出结果：
HTMLCollection [li.item, li.item, li.item.active]
可以看到，HTMLCollection 对象中包含了三个 li 元素，它们都具有类名为 item。注意，如果没有匹配的元素，该方法将返回空集合。
由于 getElementByClassName() 返回的是 HTMLCollection 对象而不是数组，因此不能使用数组相关的方法（如 forEach() 或 map()）对其进行遍历和操作。但可以通过将其转换为数组来使用这些方法，例如：
const itemsArray = Array.from(items); // 将 HTMLCollection 对象转换为数组 itemsArray.forEach(item => console.log(item.textContent));
输出结果：
Item 1 Item 2 Item 3
querySelectorAll()
除了 getElementByClassName()，还可以使用 querySelectorAll() 方法按类名获取元素。该方法接受一个 CSS 选择器作为参数，并返回一个 NodeList 对象，其中包含所有与选择器匹配的元素。
-- -------------------- ---- ------- ---- ---- -- --- ---- --- ----------------- ------ --- ----------------- ------ --- ----------- ------------ ------ -------- ------ ----- -------- ----- ----- - ----------------------------------- ------------------- ---------
输出结果：
NodeList [li.item, li.item, li.item.active]
与 getElementByClassName() 不同，querySelectorAll() 可以使用任何 CSS 选择器，例如：
const activeItems = document.querySelectorAll('.item.active');
activeItems.forEach(item => item.classList.toggle('hidden'));该代码将隐藏具有类名为 item 和 active 的所有元素。
需要注意的是，querySelectorAll() 返回的 NodeList 对象也不能直接使用数组相关的方法。但可以通过转换为数组来进行类似的操作。
小结
按类名获取元素是一项经常使用的 DOM 操作。在 JavaScript 中，可以使用 getElementByClassName() 或 querySelectorAll() 方法来实现该功能。两种方法的区别在于参数和返回值的类型不同。如果需要对返回的元素集合进行数组相关的操作，可以将其转换为数组后再进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11114
