HTMLCollection
getElementsByClassName geben eine HTMLCollection zurück, eine Liste oder Sammlung von Elementen. Die einzelnen Elemente können über einen Index angesprochen werden, length gibt die Zahl der Elemente zurück und der Index beginnt mit 0.
Eine HTMLCollection sieht aus wie ein Array, hat einen Index wie ein Array, ist aber kein Array, so dass nicht alle Array-Methoden benutzt werden können.
getElementsByClassName
get Elements By ClassName () gibt eine dynamische HTMLCollection aller Elemente einer CSS-Klasse zurück.
Die Elemente der HTMLCollection lassen sich mit einer for-Anweisung durchlaufen.
HTML
<ul id="nav"> <li><<span class="item" title="icon-video"></span> Videos</li> <li><<span class="item" title="icon-contact"></span> Kontakt</li> <li><<span class="item" title="icon-download"></span> Downloads</li> </ul>
let items = document.getElementsByClassName ("item");
let numItems = items.length;
for (let i=0; i<numItems; i++) {
console.log (items[i].getAttribute("title"));
}
NodeList und HTMLCollection
querySelectorAll gibt eine NodeList zurück, getElementsByClassName eine HTMLCollection.
Array.isArray(query) // => false query.constructor.name // => NodeList Array.isArray(items) // => false items.constructor.name // => HTMLCollection
Eine NodeList ist statisch, d.h., sie ändert sich nicht, wenn neue Elemente in die Liste eingefügt oder Elemente aus der Liste entfernt werden.
Die HTMLCollection hingegen ist dynamisch und das Einfügen oder Entfernen von Elementen ändert die Liste sofort.
const li = document.createElement('li');
const span = document.createElement ('span');
span.setAttribute('class','item');
li.appendChild(span);
document.getElementById("nav").appendChild(li);
console.log ("*** items.length " + items.length); //=> 4
console.log ("*** query.length " + query.length) //=> 5
getElementsByClassName vs querySelectorAll
Während die Unterschiede zwischen getElementById und querySelector eher akademischer Natur sind, unterscheiden sich getElementsByClassName und querySelectorAll in mehreren Punkten deutlich.
Eine NodeList, wie sie von querySelectorAll erzeugt wird, kann mit forEach durchlaufen werden.
document.querySelectorAll("item").forEach(function(item, index) {
console.log( item.getAttribute("title") );
});
oder
document.querySelectorAll("item").forEach (item => console.log (item.getAttribute("title")));
Hingegen geben forEach und die Arrow Function bei dynamischen HTML Collections eine Fehlermeldung zurück.
TypeError: items.forEach is not a function. (In 'items.forEach(function(item, index) {
console.log( item.getAttribute("title") );
})', 'items.forEach' is undefined)
getElementsByTagName
Für getElementsByTagName gilt dasselbe wie für getElementsByClassName: Zurückgegeben wird eine HTMLCollection, die live auf Änderungen des DOM reagiert.
Array-Methoden können bei HTML Collections nur angewendet werden, wenn die Liste zuvor in ein Array umgewandelt wird.
querySelector
Mit der breiten Unterstützung durch die modernen Browser sind querySelector / querySelectorAll die konsistente Alternative zu
- getElementsByClassName (querySelectorAll('.foo'))
- getelementsByName() querySelectorAll('input[name="mail"]')
querySelector / querySelectorAll kommt nah an das geniale jQuery $ und erreicht jedes Element im Dokument mit Hilfe von CSS Selektoren.