Text.wholeText

假设你的网页上有如下的简单文本 (包括其中为了格式化代码而添加的一些空格), 其 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; 可以得到更好的处理。如果你需要处理一个元素内的混合内容，正如本文所介绍的，wholeText 和 replaceWholeText() 是有用的。

• The Text interface it belongs to.