Why it is not possible to call forEach on a nodeList?

倾然丶 夕夏残阳落幕 提交于 2021-02-07 12:15:36

问题


I am using a forEach to loop through a nodeList. My code is as follows

var array = document.querySelectorAll('items');

array.forEach(function (item) {
    console.log(item);
}); 

And this code throws an error as

Uncaught TypeError: array.forEach is not a function

Then after reading few online blog articles i changed the code to this.

[].forEach.call(array, (function (item) {
    console.log(item);
})); 

Could someone please explain why it is not possible to call forEach on a nodeList and what does the above second code piece do. :)

Edit: 7/25/2017

This question does not valid for modern browsers. You can use forEach on node lists in them

Although NodeList is not an Array, it is possible to iterate on it using forEach(). It can also be converted to an Array using Array.from().

However some older browsers have not yet implemented NodeList.forEach() nor Array.from(). But those limitations can be circumvented by using Array.prototype.forEach() (more in this document).

Ref: MDN


回答1:


This is a fundamental thing in JavaScript: you can take a function from one object and apply to any other object. That is: call it with this set to the object you apply the function to. It is possible, because in JavaScript all property names etc. are (plainly speaking) identified by name. So despite NodeList.length being something different then Array.length the function Array.forEach can be applied to anything that exposes property length (and other stuff that forEach requires).

So what happens in your case is that:

  • querySelectorAll() returns an object of type NodeList, which happens to expose length property and is enumerable (let's say it is accessible by [] operator); NodeList does not expose forEach function (as you can see i.e here: https://developer.mozilla.org/en-US/docs/Web/API/NodeList) - that's why it's impossible to call forEach directly on the results of querySelectorAll()
  • [].forEach returns a function - this a not so clever shortcut for Array.prototype.forEach
  • with [].forEach.call(array, …) this function is applied onto an object referenced by array, an object of type NodeList (that is forEach is invoked with array as this in function body, so when inside forEach there is this.length it refers to length in array despite array being NodeList and not real Array)
  • this works, because forEach is using properties that Array and NodeList have in common; it would fail if, i.e. forEach wanted to use some property that Array has, but NodeList has not



回答2:


the NodeList object doesnt contain the method forEach, its a method of the Array object. the below code:

[].forEach.call(array, (function (item) {
    console.log(item);
})); 

is using the forEach method from array and passing it a NodeList.

Another option you have, and arguabiliy better, is to convert your NodeList into an array, like this:

var myArrayOfNodes = [].slice.call(NodeList);

This uses the Array objects slice method to create an array of nodes from a NodeList. This is a better aproach as you can then use an array rather then hacking an array-like object




回答3:


querySelectorAll gets the element in array-like object not an Array. So you need to use as you have in second code example.



来源:https://stackoverflow.com/questions/31338097/why-it-is-not-possible-to-call-foreach-on-a-nodelist

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!