From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/text/wholetext/index.html | 141 ++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/zh-cn/web/api/text/wholetext/index.html (limited to 'files/zh-cn/web/api/text/wholetext') 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 +--- +

{{ apiref("DOM") }}

+ +

该Text.wholeText只读属性返回Text逻辑上相邻的节点的所有文本。文本按文档顺序连接。这允许指定任何文本节点并获取所有相邻文本作为单个字符串。

+ +

Syntax

+ +
str = textnode.wholeText;
+ +

Notes and example

+ +

假设你的网页上有如下的简单文本(包括其中为了格式化代码而添加的一些空格), 其 DOM 节点 被储存在变量 para 中：

+ +
<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>
+
+ +

你觉得你不喜欢中间的句子, 所以你移除了它:

+ +
para.removeChild(para.childNodes[1]);
+
+ +

过了一会, 你又决定给“Thru-hiking is great, but casting a ballot is tricky.”这句换个说法， 同时保留超链接。 所以你尝试以下代码:

+ +
para.firstChild.data = "Thru-hiking is great, but ";
+
+ +

一切妥当, 是么? 不! 这会使你移除 strong 元素, 而被删掉的句子分隔了两个文本节点. 一个是第一句, 一个是最后一个单词. 相反, 你现在获得如下效果:

+ +
<p>Thru-hiking is great, but However, <a
+  href="http://en.wikipedia.org/wiki/Absentee_ballot">casting a
+  ballot</a> is tricky.</p>
+
+ +

实际上，你更倾向于将这些相邻扽文本节点作为同一文本节点. 这就是 wholeText 的用武之地：如果你有许多相邻的文本节点, 你可以通过wholeText访问这些节点里的所有内容。让我们假设你从未犯过最后一个错误. 在这种情况下, 我们有:

+ +
assert(para.firstChild.wholeText == "Thru-hiking is great!    However, ");
+
+ +

wholeText 只是文本节点的一个属性，特可以返回连接了所有相邻(i.e. 没有被其它元素边界分开) 文本节点数据的字符串 。

+ +

现在让我们回到最初的问题. 我们想做的是用新的文本替代旧的文本. 这就是 {{domxref("Text.replaceWholeText", "replaceWholeText()")}} 用处所在:

+ +
para.firstChild.replaceWholeText("Thru-hiking is great, but ");
+
+ +

我们移除了所有的相邻文本节点 (所有构成whole text的文本节点) 除了调用replaceWholeText() 的，并且把剩余的文本改成了新文本. 我们现在所得到的是这样的：

+ +
<p>Thru-hiking is great, but <a
+  href="http://en.wikipedia.org/wiki/Absentee_ballot">casting a
+  ballot</a> is tricky.</p>
+
+ +

有时候使用whole-text 功能同时使用Node.textContent 或长期支持的 {{domxref("Element.innerHTML")}}; 可以得到更好的处理。如果你需要处理一个元素内的混合内容, 正如本文所介绍的, wholeText 和 replaceWholeText() 是有用的。

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-text-wholetext', 'Text.wholeText')}}{{Spec2('DOM WHATWG')}}No significant change.
{{SpecName('DOM3 Core', 'core.html#Text3-wholeText', 'Text.wholeText')}}{{Spec2('DOM3 Core')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf