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