在前端开发中，我们经常需要通过类名来获取 DOM 元素，以便进行一些操作。例如，我们想要获取页面上所有类名为 "item" 的元素，然后对它们进行样式修改或添加事件监听器等操作。那么，如何通过类名来获取 DOM 子元素呢？本文将介绍三种方法。
方法一：querySelectorAll
querySelectorAll 是一个非常方便的 DOM 操作方法，它能够通过 CSS 选择器获取满足条件的所有元素。我们可以使用类似如下代码来获取所有类名为 "item" 的子元素：
const items = document.querySelectorAll(".item");这会返回一个 NodeList 对象，其中包含了所有类名为 "item" 的 DOM 元素。如果我们只想获取第一个符合条件的元素，可以使用 querySelector：
const item = document.querySelector(".item");需要注意的是，querySelectorAll 返回的是一个静态的 NodeList 对象，意味着如果页面上的符合条件的元素发生变化，它不会自动更新。如果需要动态更新数据，建议使用方法二或方法三。
方法二：getElementsByClassName
getElementsByClassName 是另一个获取 DOM 元素的方法，在性能上比 querySelectorAll 更优秀。我们同样可以使用如下代码来获取所有类名为 "item" 的子元素：
const items = document.getElementsByClassName("item");这同样会返回一个 HTMLCollection 对象，其中包含了所有类名为 "item" 的 DOM 元素。需要注意的是，在一些旧版本的浏览器中，getElementsByClassName 返回的是一个 NodeList，因此需要进行类型判断。
方法三：自定义函数
除了以上两种方法，我们还可以自己编写函数来实现通过类名获取子元素的功能。下面是一个简单的示例代码：
-- -------------------- ---- -------
-------- --------------------------------- ------- -
------ - ------ -- ---------
----- -------- - ---------------------------------
----- ------ - ---
--- ---- - - -- - - ---------------- ---- -
-- --- - - --------------------- - - ------------ - - --------- - - -- - --- -
-------------------------
-
-
------ -------
-这个函数接受两个参数，第一个是要查找的类名，第二个是要遍历的父元素，默认值为 document。它会先获取所有子元素，然后逐个检查它们的类名是否包含目标类名，最终返回所有符合条件的元素组成的数组。
需要注意的是，这个函数的性能可能不如前两种方法，因为它需要遍历所有子元素。但是，由于它是自定义的函数，我们可以对它进行优化或修改以满足特定需求。
总结
通过本文的介绍，我们学习了三种方法来通过类名获得 DOM 子元素。在实际开发中，我们可以根据具体情况选择不同的方法，以达到最佳的性能和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13805