JavaScript/DOM/Document/getElementsByClassName

Die Methode getElementsByClassName() ist für ein Dokument und auch für Elemente verfügbar. Sie gibt eine Liste von Elementen zurück, die der angegebenen Klasse (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen. Sie liefert eine sogenannte live node list als Rückgabewert, über die der Zugriff auf die gefundenen Elemente ermöglicht wird.

Syntax

let elements = document.getElementsByClassName(name)

• name: Wert des class-Attributs
• elements: live node list-Collection

Anwendungsbeispiel

Beispiel ansehen …

function beispielSuchen() {
  let x = document.getElementsByClassName('beispiel');
  for (let i = 0; i < x.length; i++) {
    x[i].innerHTML = 'Beispiel: ' + x[i].innerHTML;
  }
}

Ein Klick auf den Button zeigt an, welche Absätze die Klasse "beispiel" haben.

Beachten Sie: Die Methode getElementsByClassName() regelt lediglich den Zugriff auf HTML-Elemente. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Node-Objekt an.

Beachten Sie, dass getElementsByClassName kein Array zurückgibt, sondern eine sogenannte live node list. Man kann mittels einer Schleife die Elemente auslesen, hat aber nicht die Methoden eines Arrays zur Verfügung. Außerdem verändert sich diese live node list, wenn Sie ein Element aus dem DOM entfernen, da diese Liste eben "live" (sprich: "lebendig") ist.

Siehe auch

• JavaScript/Tutorials/Umgang mit Callback-Funktionen

Weblinks

• W3C: getElementsByClassName
• MDN: Document.getElementsByClassName