如何使用querySelectorAll返回的伪数组可用？ [英] How to have forEach available on pseudo-arrays returned by querySelectorAll?

问题描述

有些简单的javascript可以使用 forEach ， map ， 等，对 document.querySelectorAll ， document.getElementsBy * 等。

这将导致对jQuery的依赖较少，而且更简单的代码。现在，这是我们可以以丑陋的方式做到的：

  []。forEach.call（document.querySelectorAll （sel），function（el）{
}）; 
  

这是...详细

任何方式能够在返回的元素上使用 forEach 和喜欢的人物

解决方案

如果您在Chrome上进行测试，初学者将会这样做：

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

这个工作。在Webkit上。它不在Firefox上。因为FF返回一个HTMLCollection ...

我发现最多的跨浏览器方式：

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

它在IE8上不起作用，因为在向主机对象原型添加属性时，它们窒息。

完整列表：

  NodeList.prototype.forEach = HTMLCollection .prototype.forEach = Array.prototype.forEach; 
 NodeList.prototype.map = HTMLCollection.prototype.map = Array.prototype.map; 
 NodeList.prototype.filter = HTMLCollection.prototype.filter = Array.prototype.filter; 
 NodeList.prototype.reduce = HTMLCollection.prototype.reduce = Array.prototype.reduce; 
 NodeList.prototype.reduceRight = HTMLCollection.prototype.reduceRight = Array.prototype.reduceRight; 
 NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every; 
 NodeList.prototype.some = HTMLCollection.prototype.some = Array.prototype.some;或者，为了让我们亲爱的贝吉（也是因为它更清洁） ）：
  ['forEach'，'map'，'filter'，'reduce'，'reduceRight' ，'some']。forEach（
 function（p）{
 NodeList.prototype [p] = HTMLCollection.prototype [p] = Array.prototype [p]; 
}）; 
  
考虑到完美技能的链接，这在大多数情况下是无关紧要的。问题是扩展时，DOM在浏览器上的行为大体上不一样。除IE <= 8之外，所有浏览器的修改都是理所当然的。
 
Something nice with plain javascript would be to be able to use forEach, map, filter, etc, on the items returned by document.querySelectorAll, document.getElementsBy* etc.

This'd lead to less dependency on jQuery, and simply cleaner code. Right now, this is how we can do it, in an ugly way:
[].forEach.call( document.querySelectorAll(sel), function(el) {
});
This is... verbose.

Any way to be able to use forEach and the likes right away on the elements returned?
解决方案
A naive way would be to do this if you tested on Chrome:
NodeList.prototype.forEach = Array.prototype.forEach;
This works. On Webkit. It doesn't on Firefox though. Because FF returns an HTMLCollection...

The most cross-browser way I've found:
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
It doesn't work on IE8 and lower though, because they choke when adding properties to host objects prototypes.

Full list:
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
NodeList.prototype.map = HTMLCollection.prototype.map = Array.prototype.map;
NodeList.prototype.filter = HTMLCollection.prototype.filter = Array.prototype.filter;
NodeList.prototype.reduce = HTMLCollection.prototype.reduce = Array.prototype.reduce;
NodeList.prototype.reduceRight = HTMLCollection.prototype.reduceRight = Array.prototype.reduceRight;
NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every;
NodeList.prototype.some = HTMLCollection.prototype.some = Array.prototype.some;
Or, to please our dear Bergi (and also because it is cleaner):
['forEach', 'map', 'filter', 'reduce', 'reduceRight', 'every', 'some'].forEach(
    function(p) {
    NodeList.prototype[p] = HTMLCollection.prototype[p] = Array.prototype[p];
});
Considering the link to perfectionkills, it's mostly irrelevant there. The problem is that the DOM is mostly not behaving the same on browsers when extended. This modification is sane in all the browsers except IE <=8.

                        
这篇关于如何使用querySelectorAll返回的伪数组可用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！