[英]Convert NodeList to array
I'm having a hard time converting a NodeList
to an array in IE 8. The following works perfectly in Chrome, but in IE 8 toArray()
is not recognized as valid:我很难在 IE 8 中将
NodeList
转换为数组。以下内容在 Chrome 中完美运行,但在 IE 8 中toArray()
未被识别为有效:
NodeList.prototype.toArray = function() {
var a = [];
for (var i = 0, len = this.length; i < len; i++) {
a[i] = this[i];
}
return a;
}
document.all.tags("div").toArray();
I tried adding a prototype function to an array just to check my sanity and it works correctly.我尝试将原型函数添加到数组中只是为了检查我的理智并且它可以正常工作。 That makes me think IE 8 doesn't actually return a
NodeList
?这让我觉得 IE 8 实际上并没有返回
NodeList
? Here's a full example:这是一个完整的例子:
http://jsfiddle.net/e4RbH/ http://jsfiddle.net/e4RbH/
What am I doing wrong?我做错了什么?
If you're looking for a modern answer using ES6:如果您正在寻找使用 ES6 的现代答案:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
var nodes = document.querySelectorAll('div');
nodes = Array.from(nodes);
Old question, but here is a tried & true method:老问题,但这是一个久经考验的真实方法:
var nodes=document.querySelectorAll("div"); // returns a node list
nodes=Array.prototype.slice.call(nodes); // copies to an array
Explanation说明
document.querySelectorAll
uses a CSS-style selector to find elements and returns a node list. document.querySelectorAll
使用 CSS 样式的选择器来查找元素并返回一个节点列表。 It works as of IE 8.slice
method copies a portion of an array-like collection (in this case all of it) into a new array. slice
方法将类数组集合的一部分(在本例中为全部)复制到一个新数组中。call
allows you to borrow a method from one object to use on another call
允许你从一个对象借用一个方法来在另一个对象上使用To find the node list you could also have used `document.getElementsByTagName(), but this one is more flexible.要查找节点列表,您也可以使用 `document.getElementsByTagName(),但这个更灵活。
First, don't use document.all
-- it's non-standard and deprecated.首先,不要使用
document.all
—— 它是非标准的并且已被弃用。 Use document.getElementsByTagName
to get the DIV elements in your case.使用
document.getElementsByTagName
获取您的案例中的 DIV 元素。
Second, don't extend DOM objects such as NodeList
-- built-in objects are a very strange breed and are not required to behave like any other objects that you generally work with.其次,不要扩展诸如
NodeList
DOM 对象——内置对象是一个非常奇怪的种类,不需要像您通常使用的任何其他对象那样表现。 See this article for an in-depth explanation of this: What's wrong with extending the DOM .请参阅这篇文章以获得对此的深入解释: 扩展 DOM 有什么问题。
IE doesn't support NodeList
in the standard way. IE 不以标准方式支持
NodeList
。 This is why you should roll your own namespace and NOT extend browser core objects.这就是为什么你应该推出自己的命名空间而不是扩展浏览器核心对象。
You can do alert( typeof window.NodeList )
and see if it's undefined or not.您可以执行
alert( typeof window.NodeList )
并查看它是否未定义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.