CODEWITHSUNDEEP
javascriptarraysforeachnodelist
Web_Designer
Web_Designer

Reputation: 74550

NodeList.prototype.forEach = Array.prototype.forEach;

Do you see any problems with the following:

NodeList.prototype.forEach = Array.prototype.forEach;

Normally forEach is just a property of arrays, but by setting it as a property of all NodeLists as well, there's no need to convert a NodeList to an array before you can loop through its nodes with forEach.

Upvotes: 18

Views: 5542

Answers (4)

Nicolas Hoizey
Nicolas Hoizey

Reputation: 2031

NodeList.prototype.forEach() is now available in most browsers: https://developer.mozilla.org/fr/docs/Web/API/NodeList/forEach

Browser compatibility table: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Browser_Compatibility

Upvotes: 0

DaveJ
DaveJ

Reputation: 2427

If you're working on a library that will be used by other people then it's not a good idea to do this.

If it's just your own code (i.e.. a website) then I guess it's no big deal. You should probably guard it though because in the future browsers will support NodeList.prototype.forEach natively (Chrome does already).

if (!NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Upvotes: 2

Dave Arel
Dave Arel

Reputation: 489

As Zeta mentioned, it would be better to use a convenience function. This version, however, will allow you to give it context.

var forEach = function(list, callback, context){
  return Array.prototype.forEach.call(list, callback, context);
};

Upvotes: 0

Zeta
Zeta

Reputation: 105886

It's often not a good idea to extend the functionality of DOM through prototypes, especially in older versions of IE (article).

However, you can simply use Array.prototype.forEach even without adding it to the prototype chain or converting your NodeList into an array:

var list = document.querySelectorAll(".some.query");
Array.prototype.forEach.call(list, function(el){ /* ... */ });

/* or */
var forEach = function(ctn, callback){
    return Array.prototype.forEach.call(ctn, callback);
}
forEach(list, function(el){ /* ... */ });

See also MDN: Why can't I use forEach or map on a NodeList.

Upvotes: 7

Related Questions