Node.textContent

  • 版本网址缩略名: Web/API/Node.textContent
  • 版本标题: Node.textContent
  • 版本 id: 436909
  • 创建于:
  • 创建者: 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不会。

与innerHTML的区别

正如它的名字,innerHTML返回HTML文本。很多时候,当需要往一个元素里面写文本的时候,人们使用innerHTML,但其实应该使用textContent,因为text不会被处理,所以它很可能在性能表现上会更好,同时还能够避免XSS攻击。

例子

// 给定如下HTML:
//   <div id="divA">This is <span>some</span> text</div>

// 获得文本内容:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
// divA的HTML现在是这样的:
//   <div id="divA">This is some text</div>

浏览器兼容性

{{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>
<p>获取或者设置一个节点以及它的子节点的文本内容</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox">
var <em>text</em> = element.textContent;
element.textContent = "this is some sample text";
</pre>
<h2 id="Notes" name="Notes">描述</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=".E4.B8.8EinnerText.E7.9A.84.E5.8C.BA.E5.88.AB"><code>与innerText的区别</code></h3>
<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=".E4.B8.8EinnerHTML.E7.9A.84.E5.8C.BA.E5.88.AB">与innerHTML的区别</h3>
<p><code>正如它的名字,innerHTML返回HTML文本。很多时候,当需要往一个元素里面写文本的时候,人们使用innerHTML,但其实应该使用textContent,因为text不会被处理,所以它很可能在性能表现上会更好,同时还能够避免XSS攻击。</code></p>
<h2 id="Example" name="Example">例子</h2>
<pre class="brush: js">
// 给定如下HTML:
//   &lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;

// 获得文本内容:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
// divA的HTML现在是这样的:
//   &lt;div id="divA"&gt;This is some text&lt;/div&gt;
</pre>
<h2 id=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏览器兼容性</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>
<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>
恢复到这个版本