在前端开发中，经常需要操作 DOM 元素并对其进行各种操作。其中，获取元素是一个基本的操作，而 getElementsByClassName 和 querySelectorAll 是两种常用的获取 DOM 元素的方法。
getElementsByClassName
getElementsByClassName 方法可以根据指定的类名获取所有具有该类名的元素，返回的是一个集合（HTMLCollection ），可以通过下标或循环遍历访问其中的每一个元素。示例代码如下：
---- ------------------ -- ------------------ ---------- -- -------------------- -- -- -------- ------ -------- ----- -------- - ---------------------------------------- ----------------------------- -- -- - ------------------------- -- -- -- ------------------ ---------- ---------
值得注意的是，getElementsByClassName 返回的是动态集合，即当页面上的元素发生改变时，集合中的元素也会相应地更新。
querySelectorAll
querySelectorAll 方法则可以根据指定的选择器获取所有符合条件的元素，返回的是一个静态 NodeList 集合，同样可以通过下标或循环遍历访问其中的每一个元素。示例代码如下：
---- ------------------ -- ------------------ ---------- -- -------------------- -- -- -------- ------ -------- ----- -------- - ----------------------------------- ----------------------------- -- -- - ------------------------- -- -- -- ------------------ ---------- ---------
和 getElementsByClassName 不同的是，querySelectorAll 返回的是静态集合，即当页面上的元素发生改变时，集合中的元素不会更新。
getElementsByTagName 和 getElementById
除了 getElementsByClassName 和 querySelectorAll 外，还有其他获取 DOM 元素的方法。其中，getElementsByTagName 可以根据标签名获取所有符合条件的元素，返回的也是一个动态 HTMLCollection 集合；getElementById 则可以根据 id 获取唯一的一个元素，返回的直接就是对应的元素对象。
总结
总体来说，getElementsByClassName 和 querySelectorAll 的区别在于：
- 返回的类型不同：
getElementsByClassName返回的是动态 HTMLCollection 集合，而querySelectorAll返回的是静态 NodeList 集合。 - 参数的不同：
getElementsByClassName只能指定类名作为参数，而querySelectorAll可以根据更为复杂的选择器（如属性、伪类等）进行选择。
具体使用需要根据实际情况而定。如果只需要获取单一类型的元素，可以使用 getElementsByTagName 或 getElementById 直接获取；如果需要根据类名或更为复杂的选择器获取多个元素，则可以选择使用 getElementsByClassName 或 querySelectorAll。
希望以上内容能够对前端开发者的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12541