ie11 Element.children polyfill

Question

Ich arbeite an einem Projekt, in dem ich es6 Code mit Babel benutze. Ich verwende den folgenden Code ein:

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

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

Das Problem, das es Arbeit auf IE11 Eigenschaft, da keine Kinder doens't.

ich erstellen Sie die folgende polyfill aber es half nicht:

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; 
      } 
     }); 

Wenn ich IE11 debuggen Ich kann sehen, der Prototyp ist Element aber die Eigenschaft wird nicht hinzugefügt. Zusätzlich bei der Verwendung:

selectorResult instanceof Element 
selectorResult instanceof Node 

Ich bekomme auf beiden falsch.

Im Moment verwende ich eine Methode, um Kinder zu extrahieren und dann zu dem Prototyp hinzuzufügen, was ich bevorzuge.

Irgendwelche Vorschläge?

Vielen Dank im Voraus

Answer 1

Der folgende Code die Eigenschaft children an alle HTML, XML und SVG-Elemente ergänzt - es getestet unter 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); 

ich das polyfill auf MDN gefunden. Diese polyfill wird eine array anstelle eines HTMLCollection, aber man kann immer noch die Verwendung von Node.children.length und Node.children[index] Rückkehr machen

.

dieses polyfill Verwenden Sie Ihr Ergebnis wie folgt iterieren könnte:

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