Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Ja) 3.0 9.0 (Ja) (Ja)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Spezifikation

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Ctwx
 Zuletzt aktualisiert von: Ctwx,