Node.textContent

  • 版本网址缩略名: Web/API/Node.textContent
  • 版本标题: Node.textContent
  • 版本 id: 436831
  • 创建于:
  • 创建者: chyingp
  • 是否是当前版本?
  • 评论

修订内容

摘要

 

获取或者设置一个节点以及它的子节点的文本内容

语法

 

var text = element.textContent;
element.textContent = "this is some sample text";

描述

 

  • 如果节点为document,document类型,或者注释,那么textContent返回null。如果想要获得整个文档的文本以及CDATA数据,你可以使用 document.documentElement.textContent.
  • 如果节点是个CDATA,注释,处理指令或一个文本节点,textContent返回节点内部的文本(即nodeValue)。
  • 对于其他节点类型,textContent将所有子节点的textContent属性合并后返回,除了注释、处理指令节点。如果该节点没有子节点的话,返回一个空字符串。
  • 在节点上设置textContent属性的话,会删除它的所有子节点,取代这些子节点的的是一个设置了给定值的文本节点。

与innerText的区别

 

Internet Explorer引入了 element.innerText,目的是一样的,不过还是有几点不同之处:

  • 注意,虽然textContent获取所有节点的内容,包括{{HTMLElement("script")}} 和 {{HTMLElement("style")}} 节点, IE特有特性中最相似的innerText并没有。
  • innerText 会受到样式的样式,它不会返回隐藏节点的文本,但 textContent会。
  • 由于 innerText As 收到CSS样式的影响,它会引起reflow,但textContent不会。

Differences from innerHTML

 

innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTMLtextContent should be used instead. Since the text is not processed it's likely to have better performance. Moreover, this avoids an XSS vector attack.

Example

 

// Given the following HTML fragment:
//   <div id="divA">This is <span>some</span> text</div>

// Get the text content:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// Set the text content:
document.getElementById("divA").textContent = "This is some text";
// The HTML for divA is now:
//   <div id="divA">This is some text</div>

Browser compatibility

 

{{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}}

Specification

 


修订版来源

<h2 id="Summary" name="Summary">摘要</h2>
<h2 id="Summary" name="Summary">&nbsp;</h2>
<p>获取或者设置一个节点以及它的子节点的文本内容</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<h2 name="Summary">&nbsp;</h2>
<pre class="syntaxbox">
var <em>text</em> = element.textContent;
element.textContent = "this is some sample text";
</pre>
<h2 id="Notes" name="Notes">描述</h2>
<h2 name="Summary">&nbsp;</h2>
<ul>
  <li>如果节点为document,document类型,或者注释,那么textContent返回null。如果想要获得整个文档的文本以及CDATA数据,你可以使用<code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
  <li>如果节点是个CDATA,注释,处理指令或一个文本节点,textContent返回节点内部的文本(即<a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>)。</li>
  <li>对于其他节点类型,textContent将所有子节点的textContent属性合并后返回,除了注释、处理指令节点。如果该节点没有子节点的话,返回一个空字符串。</li>
  <li>在节点上设置textContent属性的话,会删除它的所有子节点,取代这些子节点的的是一个设置了给定值的文本节点。</li>
</ul>
<h3 id="Differences_from_innerText"><code>与innerText的区别</code></h3>
<h2 name="Summary">&nbsp;</h2>
<p>Internet Explorer引入了 element.innerText,目的是一样的,不过还是有几点不同之处:</p>
<ul>
  <li>注意,虽然textContent获取所有节点的内容,包括{{HTMLElement("script")}} 和 {{HTMLElement("style")}} 节点, IE特有特性中最相似的innerText并没有。</li>
  <li><code>innerText</code> 会受到样式的样式,它不会返回隐藏节点的文本,但 textContent会。</li>
  <li>由于 innerText As 收到CSS样式的影响,它会引起reflow,但textContent不会。</li>
</ul>
<h3 id="Differences_from_innerHTML">Differences from <code>innerHTML</code></h3>
<h2 name="Summary">&nbsp;</h2>
<p><code>innerHTML</code> returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use <code>innerHTML</code>.&nbsp; <code>textContent</code> should be used instead. Since the text is not processed it's likely to have better performance. Moreover, this avoids an <span title="cross-site scripting">XSS</span> vector attack.</p>
<h2 id="Example" name="Example">Example</h2>
<h2 name="Summary">&nbsp;</h2>
<pre class="brush: js">
// Given the following HTML fragment:
//   &lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;

// Get the text content:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// Set the text content:
document.getElementById("divA").textContent = "This is some text";
// The HTML for divA is now:
//   &lt;div id="divA"&gt;This is some text&lt;/div&gt;
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 name="Summary">&nbsp;</h2>
<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="Specification" name="Specification">Specification</h2>
<h2 name="Summary">&nbsp;</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>
<p><br />
  <!-- languages( { "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent", "pl": "pl/DOM/element.textContent" } ) --></p>
恢复到这个版本