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
|
---
title: Text.wholeText
slug: Web/API/Text/wholeText
translation_of: Web/API/Text/wholeText
---
<p>{{ apiref("DOM") }}</p>
<p><font><font>该</font></font><strong><code>Text.wholeText</code></strong><font><font>只读属性返回</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Text" title="文本界面表示元素或属性的文本内容。 如果一个元素在其内容中没有标记，则它有一个实现包含元素文本的Text的单个子元素。 但是，如果元素包含标记，则将其解析为形成子元素的信息项和文本节点。"><code>Text</code></a><font><font>逻辑上相邻的节点的所有文本。</font></font><font><font>文本按文档顺序连接。</font><font>这允许指定任何文本节点并获取所有相邻文本作为单个字符串。</font></font></p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate"><em>str</em> = <em>textnode</em>.wholeText;</pre>
<h2 id="Example" name="Example">Notes and example</h2>
<p>假设你的网页上有如下的简单文本(包括其中为了格式化代码而添加的一些空格), 其 DOM 节点 被储存在变量 <code>para</code> 中：</p>
<pre class="brush: html notranslate"><p>Thru-hiking is great! <strong>No insipid election coverage!</strong>
However, <a href="http://en.wikipedia.org/wiki/Absentee_ballot">casting a
ballot</a> is tricky.</p>
</pre>
<p>你觉得你不喜欢中间的句子, 所以你移除了它:</p>
<pre class="brush: js notranslate">para.removeChild(para.childNodes[1]);
</pre>
<p>过了一会, 你又决定给“Thru-hiking is great, but casting a ballot is tricky.”这句换个说法， <em>同时保留超链接</em>。 所以你尝试以下代码:</p>
<pre class="brush: js notranslate">para.firstChild.data = "Thru-hiking is great, but ";
</pre>
<p>一切妥当, 是么? <em>不!</em> 这会使你移除 <code>strong</code> 元素, 而被删掉的句子分隔了两个文本节点. 一个是第一句, 一个是最后一个单词. 相反, 你现在获得如下效果:</p>
<pre class="brush: html notranslate"><p>Thru-hiking is great, but However, <a
href="http://en.wikipedia.org/wiki/Absentee_ballot">casting a
ballot</a> is tricky.</p>
</pre>
<p>实际上，你更倾向于将这些相邻扽文本节点作为同一文本节点. 这就是 <code>wholeText</code> 的用武之地：如果你有许多相邻的文本节点, 你可以通过<code>wholeText</code>访问这些节点里的所有内容。让我们假设你从未犯过最后一个错误. 在这种情况下, 我们有:</p>
<pre class="brush: js notranslate">assert(para.firstChild.wholeText == "Thru-hiking is great! However, ");
</pre>
<p><code>wholeText</code> 只是文本节点的一个属性，特可以返回连接了所有相邻(i.e. 没有被其它元素边界分开) 文本节点数据的字符串 。</p>
<p>现在让我们回到最初的问题. 我们想做的是用新的文本替代旧的文本. 这就是 {{domxref("Text.replaceWholeText", "replaceWholeText()")}} 用处所在:</p>
<pre class="brush: js notranslate">para.firstChild.replaceWholeText("Thru-hiking is great, but ");
</pre>
<p>我们移除了所有的相邻文本节点 (所有构成whole text的文本节点) 除了调用<code>replaceWholeText()</code> 的，并且把剩余的文本改成了新文本. 我们现在所得到的是这样的：</p>
<pre class="brush: html notranslate"><p>Thru-hiking is great, but <a
href="http://en.wikipedia.org/wiki/Absentee_ballot">casting a
ballot</a> is tricky.</p>
</pre>
<p>有时候使用whole-text 功能同时使用<code>Node.textContent</code> 或长期支持的 {{domxref("Element.innerHTML")}}; 可以得到更好的处理。如果你需要处理一个元素内的混合内容, 正如本文所介绍的, <code>wholeText</code> 和 <span class="internal"><code>replaceWholeText()</code></span> 是有用的。</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-text-wholetext', 'Text.wholeText')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>No significant change.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#Text3-wholeText', 'Text.wholeText')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>{{CompatVersionUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>The {{domxref("Text")}} interface it belongs to.</li>
</ul>
|
