---
title: Node.textContent
slug: Web/API/Node/textContent
tags:
  - Node.textContent
  - innerHTML
  - innerText
  - 参考
translation_of: Web/API/Node/textContent
---
<div>{{APIRef("DOM")}}</div>

<p>{{domxref ("Node")}} 接口的<strong> </strong><code><strong>textContent</strong></code> 属性表示一个节点及其后代的文本内容。</p>

<div class="blockIndicator note">
<p><strong>注意:</strong> <code>textContent</code> 和 {{domxref("HTMLElement.innerText")}} 容易混淆，但这两个属性在<a href="/zh-CN/docs/Web/API/Node/textContent#与_innerText_的区别">重要方面有不同之处</a> 。</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre>let <var>text</var> = <var>someNode</var>.textContent;
<var>someOtherNode</var>.textContent = <var>string</var>;</pre>

<h3 id="返回值">返回值</h3>

<p>一个字符串或 <code>null</code>.</p>

<h2 id="Notes" name="Notes">描述</h2>

<p><code>textContent</code> 的值取决于具体情况：</p>

<ul>
 <li>如果节点是一个 {{domxref("document")}}，或者一个 <a href="/zh-CN/docs/Glossary/Doctype">DOCTYPE</a> ，则 <code>textContent</code> 返回 <code>null</code>。

  <div class="blockIndicator note">
  <p>如果你要获取整个文档的文本以及 <a href="/zh-CN/docs/Web/API/CDATASection">CDATA data</a> ，可以使用 <code><a href="/zh-CN/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>。</p>
  </div>
 </li>
 <li>如果节点是个 <a href="/zh-CN/docs/Web/API/CDATASection">CDATA section</a>、注释、<a href="/zh-CN/docs/Web/API/ProcessingInstruction">processing instruction</a> 或者 <a href="/zh-CN/docs/Web/API/Document/createTextNode">text node</a>，<code>textContent</code> 返回节点内部的文本内容，例如 {{domxref("Node.nodeValue")}}。</li>
 <li>对于其他节点类型，<code>textContent</code> 将所有子节点的 <code>textContent</code> 合并后返回，除了注释和processing instructions。（如果该节点没有子节点的话，返回一个空字符串。）</li>
</ul>

<p>在节点上设置 <code>textContent</code> 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。</p>

<h3 id="与_innerText_的区别">与 <strong>innerText </strong>的区别</h3>

<p>不要被 <code>Node.textContent</code> 和 {{domxref("HTMLElement.innerText")}} 的区别搞混了。虽然名字看起来很相似，但有重要的不同之处：</p>

<ul>
 <li><code>textContent</code> 会获取<em>所有</em>元素的内容，包括 {{HTMLElement("script")}} 和 {{HTMLElement("style")}} 元素，然而 <code>innerText</code><strong> </strong>只展示给人看的元素。</li>
 <li><code>textContent</code> 会返回节点中的每一个元素。相反，<code>innerText</code> 受 CSS 样式的影响，并且不会返回隐藏元素的文本，
  <ul>
   <li>此外，由于 <code>innerText</code> 受 CSS 样式的影响，它会触发回流（ <a href="/zh-CN/docs/Glossary/Reflow">reflow</a> ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）</li>
  </ul>
 </li>
 <li><font face="Open Sans, Arial, sans-serif">与 </font><code>textContent</code> 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中对 <code>innerText</code> 进行修改， 不仅会移除当前元素的子节点，而且还会<em>永久性地破坏</em>所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。</li>
</ul>

<h3 id="与_innerHTML_的区别">与 <strong>innerHTML </strong>的区别</h3>

<p>正如其名称，{{domxref("Element.innerHTML")}} 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 <code>innerHTML</code>。但是，<code>textContent</code> 通常具有更好的性能，因为文本不会被解析为HTML。</p>

<p>此外，使用 <code>textContent</code> 可以防止 <a href="/zh-CN/docs/Glossary/Cross-site_scripting">XSS 攻击</a>。</p>

<h2 id="Example" name="Example">例子</h2>

<p class="brush: js">给出这个 HTML 片段:</p>

<pre class="brush: js">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>

<p>你可以使用 <code>textContent</code> 去获取该元素的文本内容：</p>

<pre class="brush: js">let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'</pre>

<p>或者设置元素的文字内容：</p>

<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!';
// The HTML for divA is now:
// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;</pre>

<h2 id="IE8_的替代方法">IE8 的替代方法</h2>

<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
if (Object.defineProperty
  &amp;&amp; Object.getOwnPropertyDescriptor
  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
  &amp;&amp; !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     // Passing innerText or innerText.get directly does not work,
     // wrapper function is required.
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}</pre>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Node.textContent")}}</p>

<h2 id="Specification" name="Specification">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>No change vs. DOM4</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
   <td>{{Spec2('DOM4')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Introduced</td>
  </tr>
 </tbody>
</table>

<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接</h2>

<ul>
 <li>{{domxref("HTMLElement.innerText")}}</li>
 <li>{{domxref("Element.innerHTML")}}</li>
 <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li>
</ul>