Kann Element nicht in Array nach der Verwendung von QuerySelectorAll

Question

schieben Ich habe also eine einfache Klasse mit wenigen Eigenschaften. Unter Verwendung des Prototyping füge ich einige Methoden hinzu. Diese Methoden gibt this zurück, also konnte ich tham zusammen ketten.

Get Methode findet alle Elemente und legt in allCurrentElements, die ein Array ist (oder zumindest denke ich so). Und wenn ich CreateElement Methode verwende, erstellt es einfach Element und versucht, es in das vorhandene Array allCurrentElements zu schieben.

Um es zu verwenden, schreiben Sie einfach var a = _h.Get('p').CreateElement('div'). Und hier bekomme ich einen Fehler Uncaught TypeError: this.allCurrentElements.push is not a function(…).

Wenn ich versuche, neu erstellte Elemente mithilfe von Index zuzuweisen, wird kein Fehler ausgegeben. Dieses Element wird jedoch nicht im Array angezeigt.

var _h = (function(){ 
    var Helper = function(){ 
     this.allCurrentElements = []; 
    } 

    Helper.prototype.Get = function(query){ 
     this.allCurrentElements = document.querySelectorAll(query); 
     return this; 
    } 

    Helper.prototype.CreateElement = function(el, attr) { 
     var elem = document.createElement(el); 
     for (var a in attr) { 
      elem[a] = attr[a]; 
     } 

     //this.allCurrentElements[this.allCurrentElements.length] = elem; 
     this.allCurrentElements.push(elem); 
     return this; 
    } 

    return new Helper(); 
})(); 

https://jsfiddle.net/Ldp58onu/

Answer 1

Sie haben Document.querySelectorAll() Dokumentation https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Gibt einen Nicht-Live-NodeList aller Anpassungselement Knoten zu überprüfen.

NodeList werden sehr ähnlich wie Arrays verwendet und es ist verlockend, Array.prototype-Methoden für sie aufzurufen, jedoch verfügen NodeList-Objekte nicht über die bekannten Array-Methoden.

Also muss man durch NodeList etwas laufen wie:

Array.prototype.forEach.call(document.querySelectorAll(query), function(element){ 

     allCurrentElements.push(element); 

}); 

Answer 2

document.querySelectorAll() kehrt NodeList, die ein Array-ähnliches Objekt ist.

Das Problem besteht darin, dass NodeLists schreibgeschützt sind. Sie müssten es in ein Array transformieren. Array.prototype.slice.call(document.querySelectorAll(query));

danach werden Sie in der Lage sein, was immer Sie wollen.