»document.getElementById«
Die Verwendung von Elementkennungen als Namen (NAOTWO) ist in JavaScript nicht immer zuverlässig möglich.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
<script>Zustand = 1</script>
Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
Zustand.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
Es ist zur Zeit <span id="Math">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
Math.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
Es ist zur Zeit <span id="name">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
name.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
Es ist viel sicherer, wenn »document.getElementById( 'a' )« an Stelle von »a« verwendet wird, um das Elementverzeichnis eines Elements mit der Kennung »a« auszudrücken.
Damit weiterhin ein kurzer Bezug auf solch ein Element möglich ist, kann in unserem Skript ein Name dafür definiert werden.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
Es ist zur Zeit <span id="Math">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
zustand = document.getElementById( 'Math' )
zustand.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
Dadurch werden die Skripte aber länger, so daß sie nicht mehr gut in Attributwerte passen. Auch dies spricht für eine stärkere Trennung von JavaScript und HTML.
- Verzeichnisstruktur
(this)
(window)
|
|
|
v
document -------> getElementById
alert ...
...
Das DOM
Anders als NAOTWO gehört »getElementById« zum DOM -Standard, der festlegt, wie ein HTML-Dokument für Computerprogramme durch Verzeichnisse dargestellt wird.
- Der DOM -Standard
https://dom.spec.whatwg.org/
Methoden
Im folgenden Programm versuchen wir, wie schon in früheren Lektionen, eine Abkürzung für eine Funktion zu definieren, nämlich den Namen »f« für die Funktion ≫document.getElementById≪.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
Es ist zur Zeit <span id="Math">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
g = document.getElementById
zustand = g( 'Math' )
zustand.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
- Protokoll
TypeError: 'getElementById' called on an object that does not implement interface Document.
Diesmal erhalten wir jedoch eine schwer verständliche Fehlermeldung!
Warum?
Die Funktion ≫document.getElementById≪ ist eine Methode.
Das Verhalten einer Methode kann von dem Verzeichnis abhängen, das bei ihrem Aufruf angegeben wird.
Die Methode »getElementById« muß so aufgerufen werden, daß dabei »getElementById« hinter ≫document.≪ steht.
Man sagt auch, sie müsse „auf dem Objekt “ ≫document≪ aufgerufen werden. – So erklärt sich die Fehlermeldung „TypeError:'getElementById' wurde auf einem Objekt aufgerufen, welches das Interface Document nicht implementiert.“.
Die Elementverzeichnisse enthalten häufig Methoden, für die wir also keine Abkürzungen definieren können, bei deren Nutzung das Verzeichnis, aus dem sie stammen, verloren geht. Möglich wäre eine Abkürzung für »document« wie im folgenden Beispiel.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
Es ist zur Zeit <span id="Math">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
d = document
zustand = d.getElementById( 'Math' )
zustand.innerHTML='heiter'
/*]]>*/</script></code></pre></body></html>
- Anzeige
Es ist zur Zeit heiter.
Spezielle Einträge
In einem Webbrowser sind einige Attribute speziell, und Zuweisungen an sie haben nicht die normale Wirkung. Dazu gehört beispielsweise der Eintrag »name« (»window.name«).
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
<script>Zustand = 1</script>
Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.
<pre><code><script>/*<![CDATA[*/
name = document.getElementById( 'Zustand' )
a = document.getElementById( 'Zustand' )
/*]]>*/</script></code></pre></body></html>
- Konsole von Firefox (2020)
a
<span id="Zustand">
name
"[object HTMLSpanElement]"
Hier ist es so, daß der Typ von »window.name« immer ›String‹ sein muß, und daher der Wert von »document.getElementById( 'Zustand' )« bei der Zuweisung an »name« (=»window.name«) automatisch in eine Zeichenfolge gewandelt wurde.
Um solche Probleme zu vermeiden, können vorübergehend Namen wie »a« verwendet werden, die nur aus einem einzigen Buchstaben bestehen, da diese selten eine spezielle Bedeutung haben. Später werden wir eine bessere Lösung für solche Probleme kennenlernen.
Erleichterungen für Übungsaufgaben
Zur Erleichterung können Sie in folgenden Lektionen an Stelle von »getElementById« auch weiterhin NAOTWO verwenden, wann immer dies möglich ist.
Übungsaufgaben
/ Übungsaufgabe
Überarbeiten Sie das folgende Programm so, daß es nicht mehr den per NAOTWO automatisch definierten Namen »Anton« verwendet, sondern »document.getElementById«, um auf das Element mit der Kennung »Anton« zuzugreifen.
Main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">.CSS { }
</style></head><body>
<span>
<span id="Anton">Anton</span>
<span id="Berta">Berta</span>
<span id="Dora">Dora</span>
</span><pre><code><script>/*<![CDATA[*/
Anton.innerHTML = 'Regina'
/*]]>*/</script></code></pre></body></html>