Das Lemma »#getElementsByClassName«

Beispieldokument für diese Lektion

userpage.fu-berlin.de/~ram/pub/xhtml_jf47ht81Ht/main

Auswertung

this.document.getElementsByClassName( 'w' ).length

2

Auswertung

this.document.getElementsByClassName( 'w' )[ 0 ].textContent

"Berta"

Auswertung

this.document.getElementsByClassName( 'w' )[ 1 ].textContent

"Dora"

Das Lemma »#getElementsByClassName« (Elemente via Namen der Klasse) wird durch die Sprachen »Document#« und »Element#« in praktisch der gleichen Weise beschrieben.

Inklusionsdiagramm zu »#getElementsByClassName«

Document > getElementsByClassName
Element > getElementsByClassName

Für das obige Beispiel ist die folgende Herleitung relevant.

Inklusionsdiagramm zu »Ⓖ.document.getElementsByClassName«

Ⓖ.document > Document > getElementsByClassName

#getElementsByClassName

Ergibt in der durch den Quelltext gegebenen Reihenfolge die Elemente, die direkt oder indirekt im Kontext des Aufrufs enthalten sind und die eine Klasse haben, deren Namen mit dem Argumentwert übereinstimmt.

Hier ist zu beachten, daß diese Funktion immer eine Auflistung  von Elementen ergibt. Dementsprechend findet sich im Namen dieser Funktion (wie auch schon bei »getElementsByTagName«) das Wort »Elements« im Plural mit »s«, während ja »getElementById« im Vergleich das Wort »Element« im Singular ohne »s« enthält.

Diese Funktion erlaubt es uns, alle Elemente einer bestimmten Klasse zu erhalten, wann immer dies als nützlich empfunden wird.

Da diese Funktion nicht nur zur Sprache eines Dokuments gehört, sondern auch zur Sprache jedes Elements, können wir sie auch mit einem Element als Kontext verwenden, wie im folgenden Beispiel.

Auswertung

this.document.getElementById( 'zweite' ).getElementsByClassName( 'w' ).length

1

Auswertung

this.document.getElementById( 'zweite' ).getElementsByClassName( 'w' )[ 0 ].outerHTML

"<li class="d e w">Dora</li>"

Quelle

www.w3.org/TR/2015/REC-dom-20151119/

Es ist im allgemeine effizienter (wird schneller abgearbeitet), wenn der Wert sich wiederholender komplexer Ausdrücke (Ausdrücke mit Operatoren oder Aufrufen), die bei ihren Wiederholungen immer denselben Wert haben müssen, einmal in eine Variable geschrieben wird und wenn dann diese Variable an Stelle der Wiederholungen des komplexen Ausdrucks verwendet wird.

Auswertung

el = this.document.getElementById( 'zweite' ).getElementsByClassName( 'w' )
el.length

1

Auswertung

el[ 0 ].outerHTML

"<li class="d e w">Dora</li>"