JavaScript Text節(jié)點和DocumentFragment節(jié)點

Text節(jié)點的概念

Text節(jié)點代表Element節(jié)點和Attribute節(jié)點的文本內容。如果一個節(jié)點只包含一段文本，那么它就有一個Text子節(jié)點，代表該節(jié)點的文本內容。通常我們使用Element節(jié)點的firstChild、nextSibling等屬性獲取Text節(jié)點，或者使用Document節(jié)點的createTextNode方法創(chuàng)造一個Text節(jié)點。

// 獲取Text節(jié)點
var textNode = document.querySelector('p').firstChild;

// 創(chuàng)造Text節(jié)點
var textNode = document.createTextNode('Hi');
document.querySelector('div').appendChild(textNode);

瀏覽器原生提供一個Text構造函數。它返回一個Text節(jié)點。它的參數就是該Text節(jié)點的文本內容。

var text1 = new Text();
var text2 = new Text("This is a text node");

注意，由于空格也是一個字符，所以哪怕只有一個空格，也會形成Text節(jié)點。

Text節(jié)點除了繼承Node節(jié)點的屬性和方法，還繼承了CharacterData接口。Node節(jié)點的屬性和方法請參考《Node節(jié)點》章節(jié)，這里不再重復介紹了，以下的屬性和方法大部分來自CharacterData接口。

Text節(jié)點的屬性

data

data屬性等同于nodeValue屬性，用來設置或讀取Text節(jié)點的內容。

// 讀取文本內容
document.querySelector('p').firstChild.data
// 等同于
document.querySelector('p').firstChild.nodeValue

// 設置文本內容
document.querySelector('p').firstChild.data = 'Hello World';

wholeText

wholeText屬性將當前Text節(jié)點與毗鄰的Text節(jié)點，作為一個整體返回。大多數情況下，wholeText屬性的返回值，與data屬性和textContent屬性相同。但是，某些特殊情況會有差異。

舉例來說，HTML代碼如下。

<p id="para">A <em>B</em> C</p>

這時，Text節(jié)點的wholeText屬性和data屬性，返回值相同。

var el = document.getElementById("para");
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

但是，一旦移除em節(jié)點，wholeText屬性與data屬性就會有差異，因為這時其實P節(jié)點下面包含了兩個毗鄰的Text節(jié)點。

el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "

length

length屬性返回當前Text節(jié)點的文本長度。

(new Text('Hello')).length // 5

nextElementSibling

nextElementSibling屬性返回緊跟在當前Text節(jié)點后面的那個同級Element節(jié)點。如果取不到這樣的節(jié)點，則返回null。

// HTML為
// <div>Hello <em>World</em></div>

var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// <em>World</em>

previousElementSibling

previousElementSibling屬性返回當前Text節(jié)點前面最近的那個Element節(jié)點。如果取不到這樣的節(jié)點，則返回null。

Text節(jié)點的方法

appendData()，deleteData()，insertData()，replaceData()，subStringData()

以下5個方法都是編輯Text節(jié)點文本內容的方法。

appendData方法用于在Text節(jié)點尾部追加字符串。

deleteData方法用于刪除Text節(jié)點內部的子字符串，第一個參數為子字符串位置，第二個參數為子字符串長度。

insertData方法用于在Text節(jié)點插入字符串，第一個參數為插入位置，第二個參數為插入的子字符串。

replaceData方法用于替換文本，第一個參數為替換開始位置，第二個參數為需要被替換掉的長度，第三個參數為新加入的字符串。

subStringData方法用于獲取子字符串，第一個參數為子字符串在Text節(jié)點中的開始位置，第二個參數為子字符串長度。

// HTML代碼為
// <p>Hello World</p>
var pElementText = document.querySelector('p').firstChild;

pElementText.appendData('!');
// 頁面顯示 Hello World!
pElementText.deleteData(7,5);
// 頁面顯示 Hello W
pElementText.insertData(7,'Hello ');
// 頁面顯示 Hello WHello
pElementText.replaceData(7,5,'World');
// 頁面顯示 Hello WWorld
pElementText.substringData(7,10);
// 頁面顯示不變，返回"World "

remove()

remove方法用于移除當前Text節(jié)點。

// HTML代碼為
// <p>Hello World</p>

document.querySelector('p').firstChild.remove()
// 現在頁面代碼為
// <p></p>

splitText()，normalize()

splitText方法將Text節(jié)點一分為二，變成兩個毗鄰的Text節(jié)點。它的參數就是分割位置（從零開始），分割到該位置的字符前結束。如果分割位置不存在，將報錯。

分割后，該方法返回分割位置后方的字符串，而原Text節(jié)點變成只包含分割位置前方的字符串。

// html代碼為 <p id="p">foobar</p>
var p = document.getElementById('p');
var textnode = p.firstChild;

var newText = textnode.splitText(3);
newText // "bar"
textnode // "foo"

normalize方法可以將毗鄰的兩個Text節(jié)點合并。

接上面的例子，splitText方法將一個Text節(jié)點分割成兩個，normalize方法可以實現逆操作，將它們合并。

p.childNodes.length // 2

// 將毗鄰的兩個Text節(jié)點合并
p.normalize();
p.childNodes.length // 1

DocumentFragment節(jié)點

DocumentFragment節(jié)點代表一個文檔的片段，本身就是一個完整的DOM樹形結構。它沒有父節(jié)點，不屬于當前文檔，操作DocumentFragment節(jié)點，要比直接操作DOM樹快得多。

它一般用于構建一個DOM結構，然后插入當前文檔。document.createDocumentFragment方法，以及瀏覽器原生的DocumentFragment構造函數，可以創(chuàng)建一個空的DocumentFragment節(jié)點。然后再使用其他DOM方法，向其添加子節(jié)點。

var docFrag = document.createDocumentFragment();
// or
var docFrag = new DocumentFragment();

var li = document.createElement("li");
li.textContent = "Hello World";
docFrag.appendChild(li);

document.queryselector('ul').appendChild(docFrag);

上面代碼創(chuàng)建了一個DocumentFragment節(jié)點，然后將一個li節(jié)點添加在它里面，最后將DocumentFragment節(jié)點移動到原文檔。

一旦DocumentFragment節(jié)點被添加進原文檔，它自身就變成了空節(jié)點（textContent屬性為空字符串）。如果想要保存DocumentFragment節(jié)點的內容，可以使用cloneNode方法。

document.queryselector('ul').(docFrag.cloneNode(true));

DocumentFragment節(jié)點對象沒有自己的屬性和方法，全部繼承自Node節(jié)點和ParentNode接口。也就是說，DocumentFragment節(jié)點比Node節(jié)點多出以下四個屬性。

• children：返回一個動態(tài)的HTMLCollection集合對象，包括當前DocumentFragment對象的所有子元素節(jié)點。
• firstElementChild：返回當前DocumentFragment對象的第一個子元素節(jié)點，如果沒有則返回null。
• lastElementChild：返回當前DocumentFragment對象的最后一個子元素節(jié)點，如果沒有則返回null。
• childElementCount：返回當前DocumentFragment對象的所有子元素數量。

另外，Node節(jié)點的所有方法，都接受DocumentFragment節(jié)點作為參數（比如Node.appendChild、Node.insertBefore）。這時，DocumentFragment的子節(jié)點（而不是DocumentFragment節(jié)點本身）將插入當前節(jié)點。