在JavaScript中获取所有携带指定属性DOM元素的最高效方法是什么？

两种写法的性能对比 #

你给出的第一种写法性能远好于第二种，两者的核心差异如下：

• document.querySelectorAll('[attr]').forEach((el) => { ... })
  直接调用浏览器原生优化的CSS属性选择器匹配逻辑，底层由C++实现，会直接筛选出所有携带指定属性的元素，不需要额外遍历全量DOM节点，是标准的最优写法。
• document.querySelectorAll('*').forEach((el) => { if (!el.hasAttribute('attr')) return; ... })
  先查询全页面所有DOM节点，再在JS层逐个判断元素属性，遍历和判断的开销都在JS线程执行，页面DOM节点数量越多，性能差距越大，DOM节点过千时两者速度差可达百倍以上，完全不推荐这种写法。

更优的场景化方案 #

可以根据你的实际使用场景进一步优化：

• 如果查询的是内置的标准属性，比如name、class等，优先用更专用的DOM API：
  比如查name属性为指定值的元素用document.getElementsByName('xxx')，查指定类名的元素用document.getElementsByClassName('xxx')，比通用的querySelectorAll性能更高。
• 尽量缩小查询范围，不要直接在整个document下查询，如果目标元素都在某个已知容器内，可以先定位容器再查询：

  const container = document.getElementById('target-container')
  container.querySelectorAll('[attr]').forEach((el) => { ... })
  

  减少查询的DOM树范围能大幅提升查询速度。
• 如果需要高频重复查询同一属性的元素，可以用MutationObserver监听DOM的属性增减变化，维护一个动态的元素列表，避免重复查询DOM，适合实时性要求高的交互场景。

特殊兼容说明 #

只有需要兼容IE7及更早的极端旧浏览器场景下，才需要用到第二种遍历判断的写法，目前几乎不存在这类需求。

内容的提问来源于stack exchange，提问作者TacoSnack