initial commit

1 files changed, 145 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/node/textcontent/index.html b/files/zh-cn/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..1a2cd275e7
--- /dev/null
+++ b/files/zh-cn/web/api/node/textcontent/index.html
@@ -0,0 +1,145 @@
+---
+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="https://wiki.developer.mozilla.org/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="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Doctype">DOCTYPE</a> ，则 <code>textContent</code> 返回 <code>null</code>。
+
+  <div class="blockIndicator note">
+  <p>如果你要获取整个文档的文本以及 <a href="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CDATASection">CDATA section</a>、注释、<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction">processing instruction</a> 或者 <a href="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/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>