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
|
---
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>
{{Compat("api.Text.wholeText")}}
<h2 id="See_also">See also</h2>
<ul>
<li>The {{domxref("Text")}} interface it belongs to.</li>
</ul>
|
