Das Lemma »`Node#textContent`«

Beispieldokument für diese Lektion

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

Das Lemma »textContent« ist ein Eintrag in Teilen und stellt ihren Textinhalt als Zeichenfolge dar.

Inklusionsdiagramm zu »textContent«

Node > textContent

Node#textContent

Die Hintereinanderschreibung des Texthinhalts aller Textteile, die sich – direkt oder indirekt – in Kontext befinden, und zwar in der gegebenen Reihenfolge.

In dieser Dokumentation ist mit „Kontext“ der Kontext der jeweiligen Verwendung gemeint. Im Falle des Ausdrucks »this.document.firstElementChild.textContent« wäre der Kontext also beispielsweise »this.document.firstElementChild«.

Auswertung

this.document.firstElementChild.textContent

"Hallo
    Hallo, Welt
/*<![CDATA[*/
/*]]>*/
"

Inklusionsdiagramm zu »textContent«

Ⓖ.document.firstElementChild > HTMLHtmlElement > HTMLElement > Element > Node > textContent

Auswertung

this.document.firstElementChild.lastElementChild.textContent

"
    Hallo, Welt
/*<![CDATA[*/
/*]]>*/
"

Inklusionsdiagramm zu »textContent«

Ⓖ.document.firstElementChild.lastElementChild > HTMLBodyElement > HTMLElement > Element > Node > textContent

Auswertung

this.document.firstElementChild.lastElementChild.firstElementChild.textContent

"Hallo, Welt"

Inklusionsdiagramm zu »textContent«

Ⓖ.document.firstElementChild.lastElementChild.firstElementChild > HTMLParagraphElement > HTMLElement > Element > Node > textContent

Beschreibung

developer.mozilla.org/en-US/docs/Web/API/Node/textContent

www.w3.org/TR/dom/

Zuweisungen

Wir können der Eigenschaft »textContent« auch einen Text zuweisen.

Beispieldokument für die folgende Auswertung

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

Auswertung

this.document.getElementById( 'Zustand' ).textContent = 'heiter'

"heiter"

Anzeige

Es ist zur Zeit heiter.

Zuweisungen (1)

Beispieldokument für die folgende Auswertung

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

Auswertung

this.document.firstElementChild.lastElementChild.firstElementChild.textContent = "abc&<>"

"abc&<>"

Anzeige im Browser

abc&<>

Auswertung

this.document.firstElementChild.lastElementChild.firstElementChild.outerHTML

"<p>abc&amp;&lt;&gt;</p>"

Wie oben zu sehen ist, werden die Zeichen dabei nicht mit eventuellen Sonderbedeutungen, die sie eventuell im HTML-Quelltext hätten, interpretiert, sondern geben den Text an, der dann im Browser auch tatsächlich sichtbar wird. Dies bietet beim Einfügen einen gewissen Schutz gegen Eingaben, die versuchen HTML-Elemente einzuschleusen. Der entsprechende Quelltext kann dann mit »outerHTML« sichtbar gemacht werden.

Das ganze wird natürlich übersichtlicher, wenn mehr Zuweisungen verwendet werden.

Auswertung

h = this.document.firstElementChild

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

Auswertung

b = h.lastElementChild

<body>

Auswertung

p = b.firstElementChild

<p>

Auswertung

p.textContent = "<p>Müller & Co.</p>"

"<p>Müller & Co.</p>"

Auswertung

p.outerHTML

"<p>&lt;p&gt;Müller &amp; Co.&lt;/p&gt;</p>"

Anzeige im Browser

<p>Müller & Co.</p>

Übungsaufgaben

/ Übungsaufgabe

Verändern Sie durch eine Zuweisung an einen textContent-Eintrag im oben aufgelisteten Dokument »hallo« den Text »Hallo, Welt« in den Text »Guten Tag!«.

An Stelle der in dieser Lektion vorgestellten DOM-Werkzeuge wird gelegentlich »write« oder »innerHTML« verwendet.

Es gibt jedoch mit beiden Probleme: »write« schreibt nur an die Stelle, an welcher sich das Script befindet, man möchte heute aber Skripte und HTML gerne entkoppeln. Bei Verwendung von »innerHTML« werden Fehler in der Struktur des HTML-Quelltextes werden nicht immer leicht erkennbar, es steht nicht unter allen Browsern für alle Elemente zur Verfügung, es bietet Angriffspunkte für das Einschleusen von Skripten, es liefert keine Referenzen auf die eingefügten Elemente, durch das Ersetzen von Elementen mit »innerHTML« werden Ereignisempfänger in manchen Fällen so gelöscht, daß Speicher blockiert werden kann und einige Browser ändern das einzufügende HTML eigenmächtig ab.

Deswegen wird heute oft empfohlen, Seitenteile mit den in dieser Lektion vorgestellten DOM -Wirkfunktionen zu erstellen. Wenn man weiß, wo die Grenzen und Risiken von »innerHTML« liegen, so kann man dies aber in manchen Fällen weiterhin verwenden.

Wir stellen im weiteren Verlauf dieser Lektion einige DOM-Wirkfunktionen durch einfache Beispiel vor.

main

<!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">
</style></head><body>
    <h1>Vornamen</h1>
    <ul id="erste">
      <li class="m a"   id="Anton">Anton</li>
      <li class="w b"   id="Berta">Berta</li></ul>
    <ul id="zweite">
      <li class="c m"   id="Cäsar">Cäsar</li>
      <li class="d e w" id="Dora">Dora</li></ul>
    <p>Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Auswertung

( span = document.createElement( 'span' )).nodeType

Auswertung

( text = document.createTextNode( 'example' ) ).nodeType

Auswertung

span.appendChild( text ).parentElement.outerHTML

"<span>example</span>"

Auswertung

document.querySelector( ".c" ).appendChild( span ).parentElement.outerHTML

"<li class="c m">Cäsar<span>example</span></li>"

Auswertung

( li = document.createElement( 'li' ) ).appendChild( document.createTextNode( 'alpha' ))

#text "alpha"

Auswertung

ul = document.querySelector( "ul" )

<ul id="erste">

Auswertung

ul.insertBefore( li, ul.firstChild )

<li>

Auswertung

dora = document.getElementById( "Dora" )

<li class="d e w">

Auswertung

dora.parentNode.removeChild( dora )

<li class="d e w">

Auswertung

document.getElementById( "zweite" ).outerHTML

"<ul id="zweite">
      <li class="c m">Cäsar<span>example</span></li>
      </ul>"

»getElementById« ist in der Regel eine relativ schnelle Zugriffsart.

Auswertung

( new_beta = document.createElement( 'li' ) ).appendChild( document.createTextNode( 'beta' ))

#text "beta"

Auswertung

old_anton = document.getElementById( "Anton" )

<li class="m a">

Auswertung

old_anton.parentNode.replaceChild( new_beta, old_anton )

<li class="m a">

Vor- und Nachteil von »`innerHTML`«

In Vergleich zu den Möglichkeiten der DOM-Manipulation, welche derzeit in Standards enthalten sind (welche aber teilweise erst später in diesem Kurs vorgestellt werden werden) hat »innerHTML« folgende Vor- und Nachteil.

Vorteile von »innerHTML«

Es ist einfach zu verwenden.
Es wird schnell ausgeführt.

Nachteile von »innerHTML«

Es ist derzeit nicht standardisiert (aber weitverbreitet)
Wenn das Argument fehlerhaftes HTML enthält, wird dies oft ohne Fehlermeldung toleriert
Wenn das Argument Eingaben mit HTML -Elementen enthält, kann die Umsetzung Schäden hervorrufen
Der HTML-Quelltext ist manchnmal schwer lesbar
Einige Browser stellen Änderungen mit »innerHTML« verzögert dar
Einige Browser nehmen Änderungen am zugewiesenen Quelltext vor
Ereignisempfänger (noch nicht behandelt) eines Elements werden durch neu an dieses Element zugewiesenes HTML gelöscht
Man erhält keine Referenzen auf die einzelnen hinzugefügten Elemente
Es kann nicht zusammen mit Dokumentfragmenten (noch nicht behandelt) verwendet werden

Viele dieser Punkte gelten entsprechend auch für »outerHTML«.

Das Lemma »Node#textContent«

Zuweisungen

Zuweisungen (1)

Übungsaufgaben

/ Übungsaufgabe

Vor- und Nachteil von »innerHTML«

Das Lemma »`Node#textContent`«

Vor- und Nachteil von »`innerHTML`«