Variablen für Dokumententeile in JavaScript mit Firefox 38

Beispieldokument für diese Lektion

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

Wir haben schon gesehen, wie wir uns den ersten enthaltenen Teil eines Dokuments als HTML-Quelltext anzeigen lassen können.

Auswertung

this.document.firstElementChild.outerHTML

"<html><head><meta charset="UTF-8"><title>Main</title><style type="text/css">
</style></head><body>
    <p>Hallo, Welt</p>
<pre><code><script>
</script></code></pre>
</body></html>"

Wir können uns auch den ersten enthaltenen Teil des ersten enthaltenen Teil eines Dokuments als HTML-Quelltext anzeigen lassen.

Auswertung

this.document.firstElementChild.firstElementChild.outerHTML

"<head><meta charset="UTF-8"><title>Main</title><style type="text/css">
</style></head>"

Wir können uns auch den ersten enthaltenen Teil des den ersten enthaltenen Teil des ersten enthaltenen Teil eines Dokuments als HTML-Quelltext anzeigen lassen.

Auswertung

this.document.firstElementChild.firstElementChild.firstElementChild.outerHTML

"<meta charset="UTF-8">"

Jedoch ist die Wiederholung von ».firstElementChild« unübersichtlich.

Um die eingegebene Ausdrücke zu vereinfachen, können wir einen Eintrag eintragen und die Adresse des Verzeichnisses »this.document.firstElementChild« in diesem Eintrag speichern. Da es sich um ein Teil vom Elementtyp »html« handelt, wählen wir als Namen des Eintrags »h«.

Auswertung

h = this.document.firstElementChild

<html>

Nun kann »this.document.firstElementChild.outerHTML« als »h.outerHTML« abgekürzt werden.

Auswertung

h.outerHTML

"<html><head><meta charset="UTF-8"><title>Main</title><style type="text/css">
</style></head><body>
    <p>Hallo, Welt</p>
<pre><code><script>
</script></code></pre>
</body></html>"

Um auch »this.document.firstElementChild.firstElementChild.outerHTML« zu vereinfachen, können wir einen weiteren Eintrag für »this.document.firstElementChild.firstElementChild« anlegen. Dabei können wir auch gleich den zuvor schon eingeführten Eintrag »h« verwenden. Den neuen Eintrag nennen wir »hh«, da er den Elementtyp »head« hat.

Auswertung

hh = h.firstElementChild

<head>

Nun kann »this.document.firstElementChild.firstElementChild.outerHTML« als »hh.outerHTML« abgekürzt werden.

Auswertung

hh.outerHTML

"<head><meta charset="UTF-8"><title>Main</title><style type="text/css">
</style></head>"

Um auch »this.document.firstElementChild.firstElementChild.firstElementChild.outerHTML« zu vereinfachen, können wir einen weiteren Eintrag für »this.document.firstElementChild.firstElementChild.firstElementChild« anlegen. Dabei können wir auch gleich den zuvor schon eingeführten Eintrag »hh« verwenden. Den neuen Eintrag nennen wir »m«, da er den Elementtyp »meta« hat.

Auswertung

m = hh.firstElementChild

<meta charset="UTF-8">

Nun kann »this.document.firstElementChild.firstElementChild.firstElementChild.outerHTML« als »m.outerHTML« abgekürzt werden.

Auswertung

m.outerHTML

"<meta charset="UTF-8">"

Zuweisungen

Zunächst geben wir für einen späteren Vergleich noch einmal das Element »h« aus.

Auswertung

h.outerHTML

"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><meta charset="UTF-8"><title>Main</title><style type="text/css">
</style></head><body>
    <p>Hallo, Welt</p>
<pre><code><script>
</script></code></pre>

</body></html>"

Auch das Element »m« geben wir noch einmal aus.

Auswertung

m.outerHTML

"<meta charset="UTF-8">"

Der Wert des Eintrags »outerHTML« ist kein Dokumentenbestandteil mehr, sondern eine einfache Zeichenfolge. Es ist auch erlaubt, dem Eintrag einen neuen Wert zuzuweisen, wie in der folgenden Auswertung gezeigt.

Auswertung

m.outerHTML = '<meta charset="ISO-8859-1" />'

"<meta charset="ISO-8859-1" />"

Wenn wir nun das html-Element betrachten, sehen wir, daß das meta-Element der Zuweisung entsprechend von »<meta charset="UTF-8">« in »<meta charset="ISO-8859-1">« verändert wurde.

Auswertung

h.outerHTML

"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><meta charset="ISO-8859-1" /><title>Main</title><style type="text/css">
</style></head><body>
    <p>Hallo, Welt</p>
<pre><code><script>
</script></code></pre>

</body></html>"

Wir sehen bei Verwendung des Eintrags »h« den aktuellen Zustand des html-Elementes, weil der Eintrag »h« keine Kopie dies Inhalts zum Zeitpunkt der Zuweisung an »h« enthält, sondern nur die Adresse des html-Elements. Bei jeder Verwendung des Eintrags »h« wird dann der aktuelle Zustand des html-Elementes ausgelesen.

Wir können auch gezielt den neuen Zustand des Meta-Elements anzeigen lassen, welcher der folgenden Auswertung entnommen werden kann.

Auswertung

m.outerHTML

"<meta charset="UTF-8">"

Hier würde man nach dem eben Gesagten ebenfalls das neue meta-Element »<meta charset="ISO-8859-1">« erwartet. Tatsächlich erscheint hier aber noch das alte »<meta charset="UTF-8">«. Diese liegt daran, daß der Eintrag »outerHTML« kein einfacher Teil des Speichers ist. Durch eine Zuweisung an diesen Eintrag wird vielmehr eine Operation ausgelöst, welche ein neues Element gemäß der zugewiesenen Zeichenfolge anlegt und dann im übergeordneten Element einträgt. Das übergeordnete Element zu dem meta-Element ist aber das head-Element »hh«. Wenn wir dieses anzeigen, dann sehen wir auch, daß das neue Element im head-Element »hh« eingetragen wurde:

Auswertung

hh.outerHTML

"<head><meta charset="ISO-8859-1"><title>Main</title><style type="text/css">
</style></head>"

Der Eintrag »m« enthält aber nun weiterhin eine Referenz auf das alte Element, welches weiterhin existiert, aber nun nicht mehr zum Dokument gehört.

Es handelt sich bei dem Element »m« nun um ein abgetrenntes Element, das zu einem alleinstehenden Element geworden ist, welches nicht mehr – direkter oder indirekter – Teil des Dokumentes ist. (Es ist allerdings noch Teil des Hauptverzeichnisses »Ⓖ«, da es über »this.m« erreichbar ist.)

Auswertung

m.outerHTML

"<meta charset="UTF-8">"

Eine Zuweisung an die outerHTML-Eigenschaft eines Elements verändert nicht jenes Element selber, sondern das ihm übergeordnete Element!

Da Einträge in Verzeichnissen nicht immer einfache Speicherplätze sind, sondern Auslesen aus ihnen oder Schreiben in sie manchmal auch noch besondere Operationen auslösen kann, wird oft die Bezeichnung Eigenschaft verwendet, um zu verdeutlichen, daß es nicht nur einfache Speicherplätze sind.

Das alte Element wird nun nicht mehr benötigt, aber es belegt immer noch Speicherplatz. Solche vom Dokument abgetrennten Elemente können viel Speicherplatz belegen, solange ihre Adresse noch in einem Eintrag gespeichert ist. Daher kann es manchmal günstig sein, diese Adresse zu löschen, weil der Speicherplatz dann für andere Zwecke wiederverwendet werden kann. Eine Adresse kann man aus einem Eintrag löschen, indem man dort einfach irgend einen anderen Wert hineinschreibt. Die folgende Auswertung zeigt eine Möglichkeit dazu.

Auswertung

m = 0

Die Zahl »0« braucht zwar ihrerseits nun ebenfalls noch etwas Speicher, aber der Speicherplatzbedarf für eine einfache Zahl ist normalerweise viel kleiner als der für ein Element.

Übungsaufgaben

/ Übungsaufgabe

Verändern Sie durch eine Zuweisung an einen outerHTML-Eintrag im oben aufgelisteten Dokument »hallo« den Absatz »<p>Hallo, Welt</p>« in den Absatz »<p>Guten Tag!</p>«.

(Wir haben noch nicht gelernt, wie man nur den Text austauscht. Deswegen muß der gesamte Absatz ersetzt werden.)