1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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"><div id="divA">This is <span>some</span> text!</div></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:
// <div id="divA">This text is different!</div></pre>
<h2 id="IE8_的替代方法">IE8 的替代方法</h2>
<pre class="brush: js">// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !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>
|
