在前端开发中，我们经常使用 document.querySelectorAll 方法来获取页面中所有符合指定 CSS 选择器的元素。然而，我们会发现它返回的对象并不是一个真正的数组，而是一个类似数组的对象，称为 StaticNodeList。
StaticNodeList 是什么？
StaticNodeList 是一个类似数组的对象，它包含一组节点，但与数组不同，它没有一些常见的数组方法（如 .push()、.pop() 等），同时也不能被迭代器或 spread 语法展开。
为什么会返回 StaticNodeList？
这是因为 document.querySelectorAll 返回的结果需要满足实时性和静态性两个需求。
- 实时性：这意味着结果必须动态地反映文档的当前状态。如果您从一个动态网站中获取了一个节点列表，并且该站点正在动态地添加或删除元素，则您希望您的列表能够及时更新以反映这些变化。
- 静态性：这意味着结果必须保持不变。如果您对文档进行更改，例如删除一个元素或更改样式，那么您不希望查询结果中的节点数量或顺序发生变化。
由于这两个要求的相互矛盾性，浏览器厂商决定返回 StaticNodeList 而不是一个真正的数组。它既可以反映实时更改，又可以保持静态不变。
如何转换为真正的数组？
虽然 StaticNodeList 不是一个真正的数组，但您仍然可以将其转换为一个数组来使用数组的方法和属性。最简单的方法是使用 ECMAScript 6 中的 Array.from() 方法或 spread 语法：
const nodeList = document.querySelectorAll('p');
const arrayFromNodeList = Array.from(nodeList);
const arraySpread = [...nodeList];总结
虽然 document.querySelectorAll 返回的结果是 StaticNodeList，它具有实时性和静态性两个特性，但我们可以使用 ECMAScript 6 中的 Array.from() 方法或 spread 语法将其转换为真正的数组，以方便使用数组相关的方法和属性。
希望这篇文章对你理解 document.querySelectorAll 的工作原理有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12972