• querySelectorAll() 是基于CSS选择器的查询方法，返回静态 NodeList 集合
• getElementsBy 系列方法返回动态 HTMLCollection 集合
• 动态集合会实时更新匹配元素，静态集合不会自动更新
• querySelectorAll() 支持复杂CSS选择器，getElementsBy仅支持简单标签名或名称
• querySelectorAll() 返回的NodeList需转数组才能使用数组方法

一、基础语法与核心区别

querySelectorAll() 方法接受CSS选择器作为参数，例如：

document.querySelectorAll('.my-class li.active');

而 getElementsByTagName('div') 只能根据标签名获取元素

二、返回值类型对比

• querySelectorAll() 返回 NodeList 对象
• getElementsBy 返回 HTMLCollection 对象
• HTMLCollection 动态更新，NodeList 是快照集合

三、关键特性差异

• 动态特性：getElementsBy集合随DOM变化自动更新
• 选择能力：querySelectorAll支持后代选择器、伪类等高级语法
• 索引访问：两者均支持[ ]符号直接访问元素
• 遍历方式：querySelectorAll返回对象需转换为数组才能使用foreach

四、性能表现分析

现代浏览器测试数据显示：

• 简单选择时两者性能接近
• 复杂选择器时querySelectorAll优势明显
• 频繁操作DOM时getElementsBy可能更高效

五、实际应用场景指南

• 需要实时响应DOM变化时优先使用getElementsBy
• 复杂选择器场景推荐querySelectorAll
• 处理大量节点时注意NodeList的静态特性
• ES6环境可配合扩展运算符简化遍历

六、代码示例对比

相同功能不同实现方式：

// querySelectorAll版本const items = document.querySelectorAll('nav > ul li');items.forEach(item => item.addEventListener('click', handler));// getElementsByTagName版本const nav = document.querySelector('nav');const items = nav.getElementsByTagName('li');Array.from(items).forEach(...);

七、兼容性注意事项

• querySelectorAll不兼容IE8及以下
• getElementsBy全浏览器支持
• 移动端注意Android2.3的特殊处理

八、最佳实践总结

• 开发新项目首选querySelectorAll
• 维护老项目时保留getElementsBy
• 结合classList实现动态过滤
• 避免过度依赖动态集合特性
• 使用开发者工具性能分析辅助决策

九、进阶技巧分享

• 结合MutationObserver处理动态内容
• 利用伪类选择器简化逻辑
• 注意命名冲突导致的选择错误
• 服务器端渲染时的预查询优化

十、未来发展趋势

随着Shadow DOM普及，建议：

• 使用closest()配合querySelectorAll
• 注意跨影子边界的选择限制
• 探索CSS Houdini新API

掌握这两种核心选择器，能显著提升DOM操作效率。建议根据具体需求选择合适方案，在复杂交互开发中可组合使用两种方法发挥各自优势。