files/de/web/api/node/textcontent/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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:
//   &lt;div id="divA"&gt;Hier ist &lt;span&gt;etwas&lt;/span&gt; Text&lt;/div&gt;

// 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:
//   &lt;div id="divA"&gt;Hier ist auch Text&lt;/div&gt;
</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>