在前端开发中，有时需要根据特定的CSS类名获取HTML文档中的所有元素。这可以通过JavaScript和DOM API实现。本文将介绍如何使用纯JavaScript获取具有指定CSS类名的所有元素，并提供示例代码和详细说明。
获取具有指定类名的元素
我们可以使用 document.getElementsByClassName() 方法来获取文档中所有具有指定类名的元素。该方法返回一个元素集合，可以使用循环迭代每个元素并执行相应操作。
以下是使用 getElementsByClassName() 方法获取具有类名 "example" 的所有元素的示例代码：
--- -------- - -------------------------------------------
该代码段将返回一个包含所有具有 "example" 类名的元素的HTMLCollection对象。请注意，这些元素可能不按特定顺序排列。
如果要遍历此HTMLCollection并执行操作，则可以使用以下示例代码：
--- -------- - ------------------------------------------- --- ---- - - -- - - ---------------- ---- - -- ------ -
这将对 HTMLCollection 中的每个元素执行相应操作。
兼容性
由于 getElementsByClassName() 是DOM API的一部分，因此它受到浏览器兼容性的限制。但是，该方法在主流浏览器中得到广泛支持，并且可以与许多旧版本的浏览器兼容。
示例代码
以下示例演示如何在HTML文档中获取所有具有类名 "example" 的元素，并为这些元素添加新的CSS类名：
--------- -----
------
------
---------- -------- -- ----- ---- ---------------
-------
-------- -
------ ----
-
---------- -
------------ -----
-
--------
-------
------
-- -------------------- -- -- ------- --------------
-- -------------------- -- ------- ------- --------------
------- --------- ---- --- ---- --- --------- ----------
--------
--- -------- - -------------------------------------------
--- ---- - - -- - - ---------------- ---- -
---------------------------------------
-
---------
-------
-------该示例将选择具有类名 "example" 的所有段落，并使用 classList.add() 方法将新类名 "new-class" 添加到每个段落中。因此，所有具有类名 "example" 的段落都将变为加粗字体。
结论
通过使用纯JavaScript和DOM API，我们可以轻松地选择具有指定CSS类名的HTML元素。使用 document.getElementsByClassName() 方法，我们可以获取文档中所有具有特定类名的元素，并在需要时对它们进行操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26430