[英]ie11 Element.children polyfill
I'm working on a project in which I use es6 code with babel.我正在做一个项目,在这个项目中我将 es6 代码与 babel 一起使用。 I use the following code:我使用以下代码:
let result= xmlDocument.querySelector("xmlNodeSelector");
for (let child of result.children) { /* do something */ }
The problem it doens't work on IE11 since no children property.由于没有子属性,它在 IE11 上不起作用的问题。
I create the following polyfill but it didn't help:我创建了以下 polyfill,但没有帮助:
if(Element.prototype.hasOwnProperty('children')){
return;
}
Object.defineProperty(Element.prototype, 'children', {
get: function(){
let children = new HTMLCollection();
for(let i=0; i < this.childNodes.length; i++){
let item = this.childNodes[i];
if(item.nodeName !== '#text'){
children.push(item);
}
}
return children;
}
});
When I debug IE11 I can see the prototype is Element but the property is not added.当我调试 IE11 时,我可以看到原型是 Element 但没有添加属性。 In addition when using:另外在使用时:
selectorResult instanceof Element
selectorResult instanceof Node
I get false on both.我对两者都是错误的。
At the moment I use a method to extract children rather then adding to the prototype which is what i prefer.目前我使用一种方法来提取孩子而不是添加到我更喜欢的原型中。
Any suggestions?有什么建议?
Thanks in advance提前致谢
The following code adds the property children
to all HTML,XML and SVG elements - just tested it under IE11:以下代码将属性children
添加到所有 HTML、XML 和 SVG 元素 - 刚刚在 IE11 下对其进行了测试:
//make sure we have Node.children and Element.children available
(function (constructor) {
if (constructor &&
constructor.prototype &&
constructor.prototype.children == null) {
Object.defineProperty(constructor.prototype, 'children', {
get: function () {
var i = 0, node, nodes = this.childNodes, children = [];
//iterate all childNodes
while (node = nodes[i++]) {
//remenber those, that are Node.ELEMENT_NODE (1)
if (node.nodeType === 1) { children.push(node); }
}
return children;
}
});
}
//apply the fix to all HTMLElements (window.Element) and to SVG/XML (window.Node)
})(window.Node || window.Element);
I found that polyfill on MDN.我在 MDN 上找到了 polyfill。
This polyfill will return an array
, instead of an HTMLCollection
, but you can still make use of Node.children.length
and Node.children[index]
.这个 polyfill 将返回一个array
,而不是一个HTMLCollection
,但你仍然可以使用Node.children.length
和Node.children[index]
。
Using this polyfill you could iterate your result like this:使用这个 polyfill,你可以像这样迭代你的结果:
var resChildren = result.children
var index, maxindex;
for (index=0, maxindex=resChildren.length; index<maxindex; index++)
{
/* do_something_with(resChildren[index]); */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.