Node.textContent

  • Adressname der Version: DOM/Node.textContent
  • Titel der Version: Node.textContent
  • ID der Version: 301669
  • Erstellt:
  • Autor: wepunkt_empunkt
  • Aktuelle Version? Ja
  • Kommentar

Inhalt der Version

Allgemein

textContent gibt entweder den Text, den der gegebene Datenknoten enthält, zurück oder weist ihm einen solchen Text zu.

Syntax

// Liest den Text, den ein Datenknoten enthält aus:
var text = element.textContent;

// Weist einem Datenknoten einen solchen Text zu:
element.textContent = "Hier steht Text!";

Anmerkungen

  • Falls Sie die Eigenschaft textContent von einem {{ domxref("Document") }}, einem {{ domxref("DocumentType") }}, oder einer {{ domxref("Notation") }} auslesen, erhalten Sie null.
    Um den kompletten Textinhalt eines Dokuments auszulesen, verwenden Sie das {{ domxref("document.documentElement") }}:
    var inhalt = document.documentElement.textContent;
    
  • Wenn es sich bei dem Datenknoten um eine {{ domxref("CDATASection") }}, einen Kommentar ({{ domxref("Comment") }}), eine {{ domxref("ProcessingInstruction") }} oder einen Textknoten handelt, gibt textContent den Text, den der Datenknoten enthält zurück (entspricht {{ domxref("Node.nodeValue") }}).
  • In allen anderen Fällen gibt textContent den Inhalt aller Kindknoten (außer von Kommentaren und Processing Instructions) zurück. Falls der Datenknoten keine Kindknoten haben sollte, gibt textContent eine leere Zeichenkette (String).
  • Wird textContent ein Wert beigegeben, werden alle Kindknoten des Datenknotens durch diesen Wert als Zeichenkette ersetzt:
    element.textContent = "Hier steht Text";
    

Unterschiede zu innerText

Internet Explorer führte die Eigenschaft element.innerText ein. Diese ist textContent sehr ähnlich. Dennoch gibt es kleine Unterschiede:

  • Chrome und Safari beachten bei Verwendung von innerText CSS-Styles. Daher werden diese den Inhalt versteckter HTML-Elemente durch innerText nicht ausgeben. textContent hingegen kann auch mit versteckten Elementen umgehen.
    Der Internet Explorer selbst kann allerdings mit innerText auch versteckte Inhalte auslesen.
  • Das Auslesen von Kommentaren, CDATASections, etc. funktioniert mit innerText in keinem Browser (stand: 26.08.2012).
  • Der Firefox unterstützt innerText überhaupt nicht, die anderen Browser stets unterschiedlich, während textContent überall gleich funktioniert.

Unterschiede zu innerHTML

innerHTML gibt, wie der Name schon sagt, HTML zurück. Sehr häufig wird innerHTML verwendet, um Text in ein HTML-Element zu schreiben. Hierfür sollte allerdings textContent verwendet werden. innerHTML erwartet HTML-Code, und muss deshalb zunächst verarbeitet werden, was bei textContent nicht der Fall ist. Deshalb verbessern Sie durch die Verwendung von textContent möglicherweise die Performance Ihres Skripts. Darüber hinaus kann dadurch eine Sicherheitslücke, die durch einen XSS-Angriff ausgenutzt werden könnte, vermieden werden.

Beispiele

Folgendes HTML-Dokument ist gegeben:

<!DOCTYPE html>
<html>
  <body>
    <p id="text">Hier steht Text!</p>
  </body>
</html>

Folgendermaßen kann nun der Inhalt des Paragraph-Tags ausgelesen und ausgegeben werden:

// Auf das Element zugreifen:
var paragraph = document.getElementById("text");

// Schema: <element>.textContent
var text = paragraph.textContent;

// Ausgabe:
alert(text);

Wie oben bereits erklärt, kann mittels textContent der Inhalt eines HTML-Elements auch verändert werden:

// Text definieren:
var text = "Der Text wurde verändert!";

// Auf das Element zugreifen und ihm anschließend den Text zuweisen:
var paragraph = document.getElementById("text");
    paragraph.textContent = text;

 

Browserunterstützung

 

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ {{ CompatVersionUnknown() }} 9 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Spezifikation

textContent (en)

Siehe auch

  • {{ domxref("Node") }}
  • {{ domxref("Node.nodeValue") }}

{{ languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) }}

Quelltext der Version

<h2 id="Summary" name="Summary">Allgemein</h2>
<p><code>textContent</code> gibt entweder den Text, den der gegebene Datenknoten enthält, zurück oder weist ihm einen solchen Text zu.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
// Liest den Text, den ein Datenknoten enthält aus:
var <var>text</var> = element.textContent;

// Weist einem Datenknoten einen solchen Text zu:
element.textContent = "Hier steht Text!";
</pre>
<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2>
<ul>
  <li>Falls Sie die Eigenschaft <code>textContent</code> von einem {{ domxref("Document") }}, einem {{ domxref("DocumentType") }}, oder einer {{ domxref("Notation") }} auslesen, erhalten Sie <code>null</code>.<br />
    Um den kompletten Textinhalt eines Dokuments auszulesen, verwenden Sie das {{ domxref("document.documentElement") }}:
    <pre class="brush:javascript">
var inhalt = document.documentElement.textContent;
</pre>
  </li>
  <li>Wenn es sich bei dem Datenknoten um eine {{ domxref("CDATASection") }}, einen Kommentar ({{ domxref("Comment") }}), eine {{ domxref("ProcessingInstruction") }} oder einen Textknoten handelt, gibt <code>textContent</code> den Text, den der Datenknoten enthält zurück (entspricht {{ domxref("Node.nodeValue") }}).</li>
  <li>In allen anderen Fällen gibt <code>textContent</code> den Inhalt aller Kindknoten (außer von Kommentaren und Processing Instructions) zurück. Falls der Datenknoten keine Kindknoten haben sollte, gibt <code>textContent</code> eine leere Zeichenkette (<code>String</code>).</li>
  <li>Wird <code>textContent</code> ein Wert beigegeben, werden alle Kindknoten des Datenknotens durch diesen Wert als Zeichenkette ersetzt:
    <pre class="brush:javascript">
element.textContent = "Hier steht Text";
</pre>
  </li>
</ul>
<h3 id="Unterschiede_zu_innerText">Unterschiede zu <code>innerText</code></h3>
<p>Internet Explorer führte die Eigenschaft <code>element.innerText</code> ein. Diese ist <code>textContent</code> sehr ähnlich. Dennoch gibt es kleine Unterschiede:</p>
<ul>
  <li>Chrome und Safari beachten bei Verwendung von <code>innerText</code> CSS-Styles. Daher werden diese den Inhalt versteckter HTML-Elemente durch <code>innerText</code> nicht ausgeben. <code>textContent</code> hingegen kann auch mit versteckten Elementen umgehen.<br />
    Der Internet Explorer selbst kann allerdings mit <code>innerText</code> auch versteckte Inhalte auslesen.</li>
  <li>Das Auslesen von Kommentaren, CDATASections, etc. funktioniert mit <code>innerText</code> in keinem Browser (stand: 26.08.2012).</li>
  <li>Der Firefox unterstützt <code>innerText</code> überhaupt nicht, die anderen Browser stets unterschiedlich, während <code>textContent</code> überall gleich funktioniert.</li>
</ul>
<h3 id="Unterschiede_zu_innerHTML">Unterschiede zu <code>innerHTML</code></h3>
<p><code>innerHTML</code> gibt, wie der Name schon sagt, HTML zurück. Sehr häufig wird <code>innerHTML</code> verwendet, um Text in ein HTML-Element zu schreiben. Hierfür sollte allerdings <code>textContent</code> verwendet werden. <code>innerHTML</code> erwartet HTML-Code, und muss deshalb zunächst verarbeitet werden, was bei <code>textContent</code> nicht der Fall ist. Deshalb verbessern Sie durch die Verwendung von <code>textContent</code> möglicherweise die Performance Ihres Skripts. Darüber hinaus kann dadurch eine Sicherheitslücke, die durch einen <span title="Cross Site Scripting">XSS</span>-Angriff ausgenutzt werden könnte, vermieden werden.</p>
<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
<p>Folgendes HTML-Dokument ist gegeben:</p>
<pre class="brush:html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;p id="text"&gt;Hier steht Text!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Folgendermaßen kann nun der Inhalt des <code>Paragraph</code>-Tags ausgelesen und ausgegeben werden:</p>
<pre class="brush:javascript">
// Auf das Element zugreifen:
var paragraph = document.getElementById("text");

// Schema: &lt;element&gt;.textContent
var text = paragraph.textContent;

// Ausgabe:
alert(text);
</pre>
<p>Wie oben bereits erklärt, kann mittels <code>textContent</code> der Inhalt eines HTML-Elements auch verändert werden:</p>
<pre class="brush:javascript">
// Text definieren:
var text = "Der Text wurde verändert!";

// Auf das Element zugreifen und ihm anschließend den Text zuweisen:
var paragraph = document.getElementById("text");
    paragraph.textContent = text;
</pre>
<p>&nbsp;</p>
<h2 id="Browserunterst.C3.BCtzung">Browserunterstützung</h2>
<p>&nbsp;</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1+</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>9</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2>
<p><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a> (en)</p>
<h2>Siehe auch</h2>
<ul>
<li>{{ domxref("Node") }}</li>
<li>{{ domxref("Node.nodeValue") }}</li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) }}</p>
Zu dieser Version zurücksetzen