diff options
Diffstat (limited to 'files/zh-cn/web/api/text/wholetext/index.html')
| -rw-r--r-- | files/zh-cn/web/api/text/wholetext/index.html | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/text/wholetext/index.html b/files/zh-cn/web/api/text/wholetext/index.html new file mode 100644 index 0000000000..5ec686a5b9 --- /dev/null +++ b/files/zh-cn/web/api/text/wholetext/index.html @@ -0,0 +1,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> |