Javascript NodeList

Javascript NodeListPULDIVFORMIMGHTMLBODY

getElementsByTagName, getElementsByClassName und querySelectorAll geben Node Lists zurück. NodeList hat eine length-Eigenschaft und der Zugriff auf einzelne Elemente funktioniert mit eckigen Klammern.

NodeLists sind eng verwandt mit Javascript Arrays, aber ihnen fehlen viele Methoden von Arrays wie forEach, concat, slice, map und filter.

Ein for-Loop durchläuft die NodeList in gleicher Weise wie ein Array:

var divs = document.querySelectorAll("div");
for (var i=0; i < divs.length; i++) {
  var elem = divs[i];
}

Einen einzelnen Node fischt man mit einem Index aus der NodeList – nicht anders als bei einem Array.

var divs = document.getElementsByTagName('div');
var first = divs.item(0);

Das könnte auch in Array-Syntax codiert werden:

var divs = document.getElementsByTagName('div');
var first = divs[0];

divs.item(0) ist zuverlässiger als die Array-Notation. Und spätestens bei forEach endet die Ähnlichkeit.

var myArray = ['blue','seashell','orange','yellow','dimgray'];
myArray.forEach(function (item) {
  var elem = item;
});

Dynamische / statische NodeList

NodeLists haben ihre eigenen Vorteile gegenüber Arrays: Sie haben ein automatisches Update, wenn neue Elemente in das DOM eingefügt oder Elemente aus dem Dokument gelöscht werden. Aber das schöne schnelle querySelectorAll gibt nur eine statische NodeList zurück, keine dynamische mit Auto-Update.

  • document.getElementsByTagName() gibt eine dynamische NodeList zurück: Jedes Mal, wenn ein neues Element eingefügt oder gelöscht wird, bekommt die NodeList ein automatisches Update.
  • document.querySelectorAll() hingegen gibt eine statische NodeList zurück, die kein automatisches Update erfährt.

NodeList in Array umwandeln

Wir können die NodeList in ein Array umwandeln:

var myNodeList = document.querySelectorAll("div");
var myArray = [];
for (var i=0; i < myNodeList.length; i++) {
    var self = myNodeList[i];
    myArray.push(self);
}

oder 

for (var i=0; i < myNodeList.length; i++) {
    myArray[i] = myNodeList[i];
}

Das ist einfach, stabil und erhält die NodeList, hat aber keinen guten Ruf, denn diese Methode ist langsam. Wenn's schnell gehen muss:

var myArray = [];
var myNodeList = document.querySelectorAll('div');
for(var i = myNodeList.length; i--; myArray.unshift(myNodeList[i]));

Eleganter als ein for-Loop:

var divs = Array.prototype.slice.call(document.querySelectorAll('div'));

oder

var	myNodeList = document.getElementsByClassName('.myClass'),
	myArray = [].slice.call(myNodeList);

gibt eine exakte Kopie zurück.