getElementsByClassName, getElementsByTagName

getElementsByClassName

getElementsByClassName, getElementsByTagName und byName geben eine Sammlung – eine HTMLCollection – aller Elemente einer CSS-Klasse, alle Elemente mit dem aufgeführten Namen von HTML-Elementen oder alle input-Elemente mit dem angegebenen name-Attribut zurück.

getElementsByClassName und getElementsByTagName gehören zu den ältesten Methoden des Document Object Modells.

Alle drei Methoden geben jeweils 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.

getElementsByClassName

get Elements By ClassName () gibt eine dynamische HTMLCollection aller Elemente einer CSS-Klasse zurück. 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.

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>
var items = document.getElementsByClassName ("item");
var numItems = items.length;

for (var i=0; i<numItems; i++) {
   console.log (items[i].getAttribute("title"));
}

NodeList und HTMLCollection

querySelectorAll gibt es 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 Elemente ändert die HTML Collection.

var li = document.createElement('li');
var 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 Funktion 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 ()

Hier gilt dasselbe wie für getElementsByClassName:

Zurückgegeben wird eine HTMLCollection, die auf Änderungen des DOM Live reagiert.

Array-Methoden können bei HTML Collections nur angewendet werden, wenn die Collection zuvor in ein Array umgewandelt wird.

getElementsByName (name)

gibt eine HTMLCollection aller Elemente mit dem name-Attribut name zurück.

Das name-Attribut in Formularen kodiert Name-/Wertpaare für eine Anwendung (meist PHP auf dem Server) und ist in der Regel eindeutig – ähnlich dem id-Attribut. Die Ausnahme bildet INPUT-Elemente vom Typ radio, in denen ein gemeinsames name-Attribut eine zusammengehörige Gruppe von Radiobuttons identifiziert, aber auch ein <input type="submit" name="submit" … /> kann mehrfach im Dokument vorkommen – z.B. als Button „Speichern“ und „Vorschau“.

In Formularen: Alle Elemente mit name-Attribut
var cols = document.getElementsByName('color');
for (var i=0; i<cols.length; i++) {
   cols[i].onchange = function () {
      console.log ('Farbe ' +  this.getAttribute('value'));
      …
   }
}
console.log (document.querySelector ("input[name=option]:checked").value);

Die erste Anweisung liest alle Elemente, in denen name="color" notiert ist, in das Array cols. Der for-Block durchläuft alle gefundenen Elemente setzt einen Event Handler, der feuert, wenn ein Radio-Button aktiviert wird.

querySelector

Mit der breiten Unterstützung ist 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.

getElementById GetElementsByName Element im Dokument ansprechen bodyheadernavdivdivdiv id="fix"ph1pp