querySelectorAll 和 getElementByClassName 的区别是啥

返回值类型​​

querySelectorAll​​

• 返回一个 ​​静态的 NodeList​​（类数组对象），即使后续 DOM 变化也不会自动更新。
• 需要通过索引（如 [0]）或遍历（如 forEach）访问元素（现代浏览器支持 forEach，旧版可能需要 Array.from() 转换）。

const elements = document.querySelectorAll('.class');
elements.forEach(el => console.log(el));

getElementsByClassName​​

• 返回一个 ​​动态的 HTMLCollection​​（类数组对象），会实时反映 DOM 的变化（增删元素时自动更新）。
• 同样需要通过索引访问，且没有原生 forEach 方法（需先转为数组）。

const elements = document.getElementsByClassName('class');
Array.from(elements).forEach(el => console.log(el)); // 需转换

参数灵活性​​

querySelectorAll​​

• 支持 ​​CSS 选择器​​，可以组合多种条件（如 .class > div:first-child）。

// 选择所有 class="box" 且父级是 nav 的元素
document.querySelectorAll('nav .box');

getElementsByClassName​​

• 仅能通过 ​​类名​​ 选择元素，参数为字符串（多个类名需连写，如 ‘class1 class2’，但行为可能不符合预期）。

// 注意：这会选择同时有 class1 和 class2 的元素（类似 "class1 class2"）
document.getElementsByClassName('class1 class2');

性能​​

​​getElementsByClassName​​

• 通常更快，因为它是浏览器原生优化的 API，专门用于类名查询。
• 适合频繁操作或简单类名查询。
  ​​### querySelectorAll​​
• 需要解析 CSS 选择器，可能稍慢，但功能更强大。
• 在复杂选择器场景下仍高效（现代浏览器优化良好）。

动态性​​

HTMLCollection（getElementsByClassName）是动态的，而 NodeList（querySelectorAll）是静态的。

// 动态示例
const liveCollection = document.getElementsByClassName('class');
const staticList = document.querySelectorAll('.class');

// 添加新元素后：
document.body.appendChild(document.createElement('div')); // 假设新 div 有 class="class"
console.log(liveCollection.length); // 增加
console.log(staticList.length);     // 不变