javascript - document.querySelectorAll 的返回类型是什么

Question

假设我有以下列表:

  <ol>
    <li>Cookies <ol>
    <li>Coffee</li>
    <li>Milk</li>
    <li class="test1">Chocolate </li>
   </ol>

然后我在 html 的末尾执行此选择

 var nodes = document.querySelectorAll('li:first-of-type');

当我在 Chrome nodes.forEach 中尝试时，它给了我一个错误。当我查看它的值时，它看起来像一个数组。我实际上能够使用常规方式导航它，例如:

for(var i=0;i<nodes.length;i++){
   nodes[i].onclick= function(){ alert('Hello!'); };
} 

那么，document.querySelectorAll 的实际返回类型是什么？为什么数组方法不起作用？

所以，它看起来像一个数组，可以解决它以使其像数组一样工作但它不是数组吗？

Answer 1

---

结果的类型是 NodeList。因为它是一个类似 Array 的对象，您可以像这样在其上运行 map、forEach 和其他 Array.prototype 函数:

var result = document.querySelectorAll('a');
Array.prototype.map.call(result, function(t){ return t; })

Array 原型(prototype)中的 map、forEach、any 和其他函数都作用于 Array-like 对象。例如，让我们定义一个带有数字索引 (0,1) 和长度属性的对象字面量:

var arrayLike = { '0': 'a', '1': 'b', length: 2};

应用到 arrayLike 对象的 forEach 方法将像一个真正的数组一样。

Array.prototype.forEach.call(arrayLike, function(x){ console.log(x) } ); //prints a and b