Das Lemma »`#getElementsByTagName`«

Beispieldokument für diese Lektion

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

Auswertung

this.document.getElementsByTagName( 'li' ).length

Auswertung

this.document.getElementsByTagName( 'li' )[ 0 ].textContent

"Anton"

Auswertung

this.document.getElementsByTagName( 'li' )[ 1 ].textContent

"Berta"

Auswertung

this.document.getElementsByTagName( 'li' )[ 2 ].textContent

"Cäsar"

Auswertung

this.document.getElementsByTagName( 'li' )[ 3 ].textContent

"Dora"

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

Inklusionsdiagramm zu »#getElementsByTagName«

Document > getElementsByTagName
Element > getElementsByTagName

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

Inklusionsdiagramm zu »Ⓖ.document.getElementsByTagName«

Ⓖ.document > Document > getElementsByTagName

#getElementsByTagName

Ergibt in der durch den Quelltext gegebenen Reihenfolge die Elemente, die direkt oder indirekt im Kontext des Aufrufs enthalten sind und dessen Typ mit dem Argumentwert übereinstimmt.

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

Der Name »getElementsByTagName« ist nicht genau treffend, da es hierbei nicht um den Namen eines “tags ” geht, sondern um den Typ eines Elements. Daher wäre ein zutreffenderer und sogar einfacherer Name vielleicht »elementsOfType« gewesen. (Wir werden später noch sehen, wie man solche Namen auch umbenennen könnte, so daß es theoretisch auch möglich wäre, als unpassend empfundene Namen für eigene Skripte zu ändern. Jedoch wäre die Änderung verbreiteter Namen wahrscheinlich irritierend, so daß es wohl doch besser ist, verbreitete Namen zu verwenden, auch wenn sie als unpassend empfunden werden.)

Diese Funktion erlaubt es uns, alle Elemente eines bestimmten Typs 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' ).getElementsByTagName( 'li' ).length

Auswertung

this.document.getElementById( 'zweite' ).getElementsByTagName( 'li' )[ 0 ].outerHTML

"<li class="m">Cäsar</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.getElementsByTagName( 'li' )

Auswertung

el.length

Auswertung

el[ 0 ].textContent

"Anton"

Auswertung

el[ 1 ].textContent

"Berta"

Auswertung

el[ 2 ].textContent

"Cäsar"

Auswertung

el[ 3 ].textContent

"Dora"

? Übungsfrage

In der Funktion »onClick« soll mit der dafür vorgesehenen Funktion »toggle« die Klasse »off« umgeschaltet werden. Dies gelingt aber nicht. Wo in dem JavaScript-Teil steckt der Fehler? (An dem style-Element und dem body-Element vor dem Skript soll nichts verändert werden.)

Hinweis Dieser Fehler hat mit einem Thema zu tun, das schon vor längerer Zeit behandelt wurde. Daher könnte man die Lösung auch dann finden, wenn man mit den neueren Themen noch nicht so vertraut ist. Man muß nur zirka 5 Zeichen an einer Stelle löschen, ändern oder einfügen, um den Fehler zu beseitigen.

main.html

<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
.off { display: none }
</style></head><body>
<h1 id="h1">Hier klicken</h1>
<p><span>0</span></p>
<pre><code><script>/*<![CDATA[*/
function onClick()
{ document.getElementsByTagName( "span" ).classList.toggle( "off" ); }
function onDOMContentLoaded()
{ document.getElementById( "h1" ).addEventListener( "click", onClick ); }
function wireDOMContentLoaded()
{ document.addEventListener( "DOMContentLoaded", onDOMContentLoaded, false ); }
wireDOMContentLoaded();
/*]]>*/</script></code></pre></body></html>

Das Lemma »#getElementsByTagName«

? Übungsfrage

Das Lemma »`#getElementsByTagName`«