5.4 Text節點和DocumentFragment節點 · JavaScript 標準參考教程

[TOC] ## Text節點的概念 Text節點代表Element節點和Attribute節點的文本內容。如果一個節點只包含一段文本，那么它就有一個Text子節點，代表該節點的文本內容。通常我們使用Element節點的firstChild、nextSibling等屬性獲取Text節點，或者使用Document節點的createTextNode方法創造一個Text節點。 ~~~ // 獲取Text節點 var textNode = document.querySelector('p').firstChild; // 創造Text節點 var textNode = document.createTextNode('Hi'); document.querySelector('div').appendChild(textNode); ~~~ 瀏覽器原生提供一個Text構造函數。它返回一個Text節點。它的參數就是該Text節點的文本內容。 ~~~ var text1 = new Text(); var text2 = new Text("This is a text node"); ~~~ 注意，由于空格也是一個字符，所以哪怕只有一個空格，也會形成Text節點。 Text節點除了繼承Node節點的屬性和方法，還繼承了CharacterData接口。Node節點的屬性和方法請參考《Node節點》章節，這里不再重復介紹了，以下的屬性和方法大部分來自CharacterData接口。 ## Text節點的屬性 ### data data屬性等同于nodeValue屬性，用來設置或讀取Text節點的內容。 ~~~ // 讀取文本內容 document.querySelector('p').firstChild.data // 等同于 document.querySelector('p').firstChild.nodeValue // 設置文本內容 document.querySelector('p').firstChild.data = 'Hello World'; ~~~ ### wholeText wholeText屬性將當前Text節點與毗鄰的Text節點，作為一個整體返回。大多數情況下，wholeText屬性的返回值，與data屬性和textContent屬性相同。但是，某些特殊情況會有差異。舉例來說，HTML代碼如下。 ~~~ A B C ~~~ 這時，Text節點的wholeText屬性和data屬性，返回值相同。 ~~~ var el = document.getElementById("para"); el.firstChild.wholeText // "A " el.firstChild.data // "A " ~~~ 但是，一旦移除em節點，wholeText屬性與data屬性就會有差異，因為這時其實P節點下面包含了兩個毗鄰的Text節點。 ~~~ el.removeChild(para.childNodes[1]); el.firstChild.wholeText // "A C" el.firstChild.data // "A " ~~~ ### length length屬性返回當前Text節點的文本長度。 ~~~ (new Text('Hello')).length // 5 ~~~ ### nextElementSibling nextElementSibling屬性返回緊跟在當前Text節點后面的那個同級Element節點。如果取不到這樣的節點，則返回null。 ~~~ // HTML為 // <div>Hello World</div> var tn = document.querySelector('div').firstChild; tn.nextElementSibling // World ~~~ ### previousElementSibling previousElementSibling屬性返回當前Text節點前面最近的那個Element節點。如果取不到這樣的節點，則返回null。 ## Text節點的方法 ### appendData()，deleteData()，insertData()，replaceData()，subStringData() 以下5個方法都是編輯Text節點文本內容的方法。 appendData方法用于在Text節點尾部追加字符串。 deleteData方法用于刪除Text節點內部的子字符串，第一個參數為子字符串位置，第二個參數為子字符串長度。 insertData方法用于在Text節點插入字符串，第一個參數為插入位置，第二個參數為插入的子字符串。 replaceData方法用于替換文本，第一個參數為替換開始位置，第二個參數為需要被替換掉的長度，第三個參數為新加入的字符串。 subStringData方法用于獲取子字符串，第一個參數為子字符串在Text節點中的開始位置，第二個參數為子字符串長度。 ~~~ // HTML代碼為 // Hello World 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節點。 ~~~ // HTML代碼為 // Hello World document.querySelector('p').firstChild.remove() // 現在頁面代碼為 // ~~~ ### splitText()，normalize() splitText方法將Text節點一分為二，變成兩個毗鄰的Text節點。它的參數就是分割位置（從零開始），分割到該位置的字符前結束。如果分割位置不存在，將報錯。分割后，該方法返回分割位置后方的字符串，而原Text節點變成只包含分割位置前方的字符串。 ~~~ // html代碼為 foobar var p = document.getElementById('p'); var textnode = p.firstChild; var newText = textnode.splitText(3); newText // "bar" textnode // "foo" ~~~ normalize方法可以將毗鄰的兩個Text節點合并。接上面的例子，splitText方法將一個Text節點分割成兩個，normalize方法可以實現逆操作，將它們合并。 ~~~ p.childNodes.length // 2 // 將毗鄰的兩個Text節點合并 p.normalize(); p.childNodes.length // 1 ~~~ ## DocumentFragment節點 DocumentFragment節點代表一個文檔的片段，本身就是一個完整的DOM樹形結構。它沒有父節點，不屬于當前文檔，操作DocumentFragment節點，要比直接操作DOM樹快得多。它一般用于構建一個DOM結構，然后插入當前文檔。document.createDocumentFragment方法，以及瀏覽器原生的DocumentFragment構造函數，可以創建一個空的DocumentFragment節點。然后再使用其他DOM方法，向其添加子節點。 ~~~ 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); ~~~ 上面代碼創建了一個DocumentFragment節點，然后將一個li節點添加在它里面，最后將DocumentFragment節點移動到原文檔。一旦DocumentFragment節點被添加進原文檔，它自身就變成了空節點（textContent屬性為空字符串）。如果想要保存DocumentFragment節點的內容，可以使用cloneNode方法。 ~~~ document.queryselector('ul').(docFrag.cloneNode(true)); ~~~ DocumentFragment節點對象沒有自己的屬性和方法，全部繼承自Node節點和ParentNode接口。也就是說，DocumentFragment節點比Node節點多出以下四個屬性。 * children：返回一個動態的HTMLCollection集合對象，包括當前DocumentFragment對象的所有子元素節點。 * firstElementChild：返回當前DocumentFragment對象的第一個子元素節點，如果沒有則返回null。 * lastElementChild：返回當前DocumentFragment對象的最后一個子元素節點，如果沒有則返回null。 * childElementCount：返回當前DocumentFragment對象的所有子元素數量。另外，Node節點的所有方法，都接受DocumentFragment節點作為參數（比如Node.appendChild、Node.insertBefore）。這時，DocumentFragment的子節點（而不是DocumentFragment節點本身）將插入當前節點。