Question

我正在开发一个项目，我在其中使用带有babel的es6代码。我使用以下代码：

 let result= xmlDocument.querySelector("xmlNodeSelector");

 for (let child of  result.children) { /* do something */ }

由于没有儿童财产，它在IE11上工作的问题。

我创建了以下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;
            }
        });

当我调试IE11时，我可以看到原型是Element但是没有添加属性。另外在使用时：

selectorResult instanceof Element
selectorResult instanceof Node

我两个都弄错了。

目前我使用一种方法来提取孩子而不是添加到我更喜欢的原型中。

有什么建议吗？

提前致谢

Answer 1

以下代码将属性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);

我在MDN上发现了polyfill。

此polyfill将返回array而不是HTMLCollection，但您仍然可以使用Node.children.length和Node.children[index]。

使用此polyfill，您可以像这样迭代结果：

var resChildren = result.children
var index, maxindex;
for (index=0, maxindex=resChildren.length; index<maxindex; index++) 
{
    /* do_something_with(resChildren[index]); */
}

ie11 Element.children polyfill

1 个答案: