diff options
Diffstat (limited to 'files/de/web/api/node/textcontent/index.html')
| -rw-r--r-- | files/de/web/api/node/textcontent/index.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..c237b6ee70 --- /dev/null +++ b/files/de/web/api/node/textcontent/index.html @@ -0,0 +1,69 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Eigenschaft + - Kommando API + - NeedsSpecTable + - Referenz +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die <code><strong>Node.textContent</strong></code> Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>text</em> = element.textContent; +element.textContent = "Dies ist ein Beispiel-Text"; +</pre> + +<h2 id="Notes" name="Notes">Beschreibung</h2> + +<ul> + <li><code>textContent</code> gibt <code>null</code> zurück, wenn das Element ein D<a href="/en-US/docs/DOM/document" title="DOM/Document">ocument</a>, ein Dokumenten-Typ oder eine Notation ist. Um den gesamten Text und die CDATA Daten für das gesamte Dokument zu bekommen, kann man <code><a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code> benutzen.</li> + <li>Handelt es sich bei der Node um eine CDATA Sektion, einen Kommentar, eine Prozess-Anweisun oder eine Text-Node, dann gibt <code>textContent</code> den Text in dieser Node zurück (den <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li> + <li>Für andere Node-Typen gibt <code>textContent</code> die aneinander gehängten <code>textContent</code> Attribute aller Kind-Nodes zurück, aber ohne Kommentare und Prozess-Anweisungen. Dies ist ein leerer String, wenn die Node keine Kinder hat.</li> + <li>Wenn man diese Eigenschaft setzt, werden alle Kinder der Node ersetzt und mit einer einzelnen Text-Node ersetzt, die den neuen Wert beinhaltet.</li> +</ul> + +<h3 id="Unterschiede_zu_innerText">Unterschiede zu <code>innerText</code></h3> + +<p>Internet Explorer hat <code>element.innerText</code> eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:</p> + +<ul> + <li>Während <code>textContent</code> den Inhalt aller Element, inklusive {{HTMLElement("script")}} und {{HTMLElement("style")}} Elementen, liefert, macht die IE-spezifische Eigenschaft <code>innerText</code> dies nicht.</li> + <li><code>innerText</code> kennt den Stil und gibt keinen Text versteckter Elemente zurück, was <code>textContent</code> hingegen tut.</li> + <li>Da <code>innerText</code> den CSS-Stil kennt, verursacht es einen Reflow, während <code>textContent</code> dies nicht tut.</li> +</ul> + +<h3 id="Unterschiede_zu_innerHTML">Unterschiede zu <code>innerHTML</code></h3> + +<p><code>innerHTML</code> gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber <code>textContent</code> verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: js">// Nehmen wir das folgende HTML Fragment: +// <div id="divA">Hier ist <span>etwas</span> Text</div> + +// Abrufen des Text-Inhalts: +var text = document.getElementById("divA").textContent; +// |text| wird auf "Hier ist etwas Text" gesetzt + +// Setzen des Text-Inhalts: +document.getElementById("divA").textContent = "Hier ist auch Text"; +// Das HTML von divA sieht nun so aus: +// <div id="divA">Hier ist auch Text</div> +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li> +</ul> |