Text.wholeText | Web API

在此页

句法
Notes and example
规范
浏览器兼容性
另请参阅
相关话题

Text.wholeText read-only property returns the full text of all 文本 nodes logically adjacent to the node. The text is concatenated in document order. This allows to specify any text node and obtain all adjacent text as a single string.

句法

str = textnode.wholeText;

Notes and example

Suppose you have the following simple paragraph within your webpage (with some whitespace added to aid formatting throughout the code samples here), whose DOM node is stored in the variable 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>

You decide you don’t like the middle sentence, so you remove it:

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

Later, you decide to rephrase things to, “Thru-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink . So you try this:

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

All set, right? Wrong! What happened was you removed the strong element, but the removed sentence’s element separated two text nodes. One for the first sentence, and one for the first word of the last. Instead, you now effectively have this:

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

You’d really prefer to treat all those adjacent text nodes as a single one. That’s where wholeText comes in: if you have multiple adjacent text nodes, you can access the contents of all of them using wholeText . Let’s pretend you never made that last mistake. In that case, we have:

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

wholeText is just a property of text nodes that returns the string of data making up all the adjacent (i.e. not separated by an element boundary) text nodes combined.

Now let’s return to our original problem. What we want is to be able to replace the whole text with new text. That’s where replaceWholeText() comes in:

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

We’re removing every adjacent text node (all the ones that constituted the whole text) but the one on which replaceWholeText() is called, and we’re changing the remaining one to the new text. What we have now is this:

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

Some uses of the whole-text functionality may be better served by using Node.textContent , or the longstanding Element.innerHTML ; that’s fine and probably clearer in most circumstances. If you have to work with mixed content within an element, as seen here, wholeText and replaceWholeText() may be useful.

replaceWholeText() is obsolete .

规范

规范	状态	注释
DOM The definition of 'Text.wholeText' in that specification.	实时标准	No significant change.
DOM (文档对象模型) 3 级核心规范 The definition of 'Text.wholeText' in that specification.	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`wholeText`	Chrome 1	Edge 12	Firefox 3.5	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android ?	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android ?

图例

完整支持
兼容性未知 ?

另请参阅

文本 interface it belongs to.

元数据

最后修改： Apr 21, 2020

DOM (文档对象模型)
文本
构造函数
1. Text()
特性
1. assignedSlot
2. ~~isElementContentWhitespace~~
3. wholeText
方法
1. ~~replaceWholeText()~~
2. splitText()
继承：
DOM 相关页面

在此页

句法

Notes and example

规范

浏览器兼容性

图例

另请参阅

相关话题