get Elements By Class Name, get Elements By Tag Name

Javascript getElementsByClassName, getElementsByTagName

getElementsByClassName und getElementsByTagName geben eine Sammlung (HTMLCollection) aller Elemente einer CSS-Klasse bzw. aller Elemente mit dem aufgeführten Namen zurück.

getElementsByTagName gehört genauso wie getElementsByName zu den ältesten Methoden des Document Object Modells. getElementsByClassName kam erst spät dazu.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.