Der Eintrag »textContent« [DOM ] in JavaScript unter Firefox (Stand 2019)
Das Wort »textContent« steht für den Textinhalt des ihn enthaltenden Elements.
- Beschreibung (hierarchical part)
developer.mozilla.org/en-US/docs/Web/API/Node/textContent
- Der DOM -Standard
https://dom.spec.whatwg.org/
textContent- Der Texts des enthaltenden Elements
Main.html<span id="all">Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</span>
- Auswertung mit dem Beispieldokument
Zustand.textContent
"(unbekannt)"
Hier folgt zum Vergleich eine Auswertung mit »innerHTML«.
- Auswertung mit dem Beispieldokument
Zustand.innerHTML
"(unbekannt)"
Unterschiede zu »innerHTML«
»textContent« ist eine DOM-Eigenschaft, während »innerHTML« nicht zum DOM gehört.
Eine Auswertung der innerHTML-Eigenschaft ergibt HTML-Quelltext, während eine Auswertung der textContent-Eigenschaft beliebigen Text ergibt.
Main.html<span id="all">Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</span>
- Auswertung mit dem Beispieldokument (»"« wurde durch »'« und »\"« durch »"« ersetzt)
all.innerHTML
'Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.'
- Auswertung mit dem Beispieldokument
all.textContent
"Es ist zur Zeit (unbekannt)."
Zuweisungen an »textContent«
Wie bei einer innerHTML-Eigenschaft sind auch Zuweisungen an eine textContent-Eigenschaft möglich.
Dabei wird der zugewiesene Text wörtlich zum neuen Text, der dann als Textinhalt des enthaltenden Elements erscheint. Es ist also nicht möglich, auf diese Weise Elemente einzufügen.
Main.html<span id="all">Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</span>
- Auswertung mit dem Beispieldokument
all.innerHTML = 'alpha <a href="http://www.example.com/">beta</a> gamma'
- ungefähre Darstellung des Beispieldokuments im Browser
alpha beta gamma- Auswertung mit dem Beispieldokument
all.textContent = 'alpha <a href="http://www.example.com/">beta</a> gamma'
- ungefähre Darstellung des Beispieldokuments im Browser
alpha <a href="http://www.example.com/">beta</a> gamma
- Auswertung mit dem Beispieldokument (»"« wurde durch »'« und »\"« durch »"« ersetzt)
all.innerHTML
'alpha <a href="http://www.example.com/">beta</a> gamma'
Sicherheitsaspekte
Bei der Interpretation von HTML-Quelltext, der an eine innerHTML-Eigenschaft zugewiesen wird, könnten im Quelltext enthaltene JavaScript -Anweisungen ausgeführt werden. Dies kann eine Sicherheitslücke darstellen, wenn Quelltext aus unsicherer Herkunft in ein Dokument eingefügt wird.
Empfehlung
Falls nur Text ausgelesen oder zugewiesen werden soll, ist »textContent« genauer und sicherer als »innerHTML«. Deswegen sollte bevorzugt »textContent« verwendet werden.
Umwandlungen
Mit »textContent« und »innerHTML« kann Text zwischen einer Selbstdarstellung und einer Quelltextdarstellung gewandelt werden.
Main.html<span id="span"></span>
- Skript
span.textContent = 'x<y'; console.log( span.innerHTML )
- Ausgabe des Skripts
x<y
- Skript
span.innerHTML = 'x>y'; console.log( span.textContent )
- Ausgabe des Skripts
x>y
Übungsaufgaben
Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.
Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.
Main.html<style>
</style>
<script>
</script>
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
/ Ändern des Dokuments
- Quelltext des Beipieldokuments
<span>
<span id="Anton">Anton</span>
<span id="Berta">Berta</span>
<span id="Dora">Dora</span>
</span>
Ändern Sie das im Browser angezeigte Wort „Anton“ in „Anna“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen textContent-Eintrag eingeben.
Reserveaufgaben
Hinweis für den Dozenten ► Diese Reserveaufgabe werden in Kursen nur bearbeitet, wenn es noch Schwierigkeiten bei der Bearbeitung der voranstehenden Übungsaufgabe gab.
/ Ändern des Dokuments (1)
Hinweis für den Dozenten ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Reserveaufgabe bearbeitet werden.
Ändern Sie das im Browser angezeigte Wort „Berta“ in „Bravo“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen textContent-Eintrag eingeben.
/ Ändern des Dokuments (2)
Hinweis für den Dozenten ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Übungsaufgabe bearbeitet werden.
Ändern Sie das im Browser angezeigte Wort „Dora“ in „Daniel“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen textContent-Eintrag eingeben.
/ Inkrementieren ⃖
Bei der Lösung dieser Aufgabe sollte »textContent« und nicht »innerHTML« verwendet werden.
Schreiben Sie zunächst (mit Hilfe einer JavaScript -Eingabe) den Text »7« in das span-Element des folgenden Beispieldokuments.
Main.htmlZustand = <span id="Zustand">(unbekannt)</span>
Schreiben Sie nun eine Zeile, welche das Numerale in jenem span-Element um Eins erhöht.
Geben Sie die Zeile mehrmals hintereinander ein und beobachten Sie, wie das Numerale, welches zunächst »7« lautet, entsprechend immer größer wird.
/ Einfügen einer Zufallszahl
Fügen Sie durch eine (möglichst kurze) Zuweisung an einen textContent-Eintrag eine Zufallszahl in das Dokument ein.
Beim Wiederholen des Einfügens sollte eine andere Zufallszahl erscheinen.
/ Einfügen der Dokumentadresse
Fügen Sie durch eine (möglichst kurze) Zuweisung an einen textContent-Eintrag die Adresse des Dokuments, zu dem die verwendete JavaScript -Konsole gehört, ein, die dazu dem Verzeichnis »windows« entnommen werden sollte.