Document.getElementsByClassName()

Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls getElementsByClassName() mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.

Syntax

var elements = document.getElementsByClassName(names); // oder:
var elements = rootElement.getElementsByClassName(names);

• elements ist eine live HTMLCollection von gefunden Elementen.
• names ist ein String der eine Liste der gefundenen Klassennamen repräsentiert; Klassennamen sind durch Leerzeichen getrennt.
• getElementsByClassName kann auf jedes Element aufgerufen werden und nicht nur auf document. Das Element, auf dass diese Funktion aufgerufen wird, wird als root-Element genutzt.

Beispiele

Alle Elemente der Klasse 'test' holen:

document.getElementsByClassName('test');

Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:

document.getElementsByClassName('red test');

Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:

document.getElementById('main').getElementsByClassName('test');

Man kann auch Methoden von Array.prototype auf HTMLCollection anwenden, in dem die HTMLCollection  in dem sie an die this Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

Browserkompabilität

Spezifikation

• W3C: getElementsByClassName