Text.wholeText

该**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. 没有被其它元素边界分开) 文本节点数据的字符串 。

现在让我们回到最初的问题. 我们想做的是用新的文本替代旧的文本. 这就是 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 或长期支持的 Element.innerHTML; 可以得到更好的处理。如果你需要处理一个元素内的混合内容, 正如本文所介绍的, wholeTextreplaceWholeText() 是有用的。

Specifications

Specification
DOM Standard
# ref-for-dom-text-wholetext①

Browser compatibility

BCD tables only load in the browser

See also

  • The Text interface it belongs to.