免費(fèi)AI編程助手
Text 節(jié)點(diǎn)的概念
文本節(jié)點(diǎn)（Text）代表元素節(jié)點(diǎn)（Element）和屬性節(jié)點(diǎn)（Attribute）的文本內(nèi)容。如果一個(gè)節(jié)點(diǎn)只包含一段文本，那么它就有一個(gè)文本子節(jié)點(diǎn)，代表該節(jié)點(diǎn)的文本內(nèi)容。
通常我們使用父節(jié)點(diǎn)的firstChild、nextSibling等屬性獲取文本節(jié)點(diǎn)，或者使用Document節(jié)點(diǎn)的createTextNode方法創(chuàng)造一個(gè)文本節(jié)點(diǎn)。
// 獲取文本節(jié)點(diǎn)
var textNode = document.querySelector('p').firstChild;
// 創(chuàng)造文本節(jié)點(diǎn)
var textNode = document.createTextNode('Hi');
document.querySelector('div').appendChild(textNode);
瀏覽器原生提供一個(gè)Text構(gòu)造函數(shù)。它返回一個(gè)文本節(jié)點(diǎn)實(shí)例。它的參數(shù)就是該文本節(jié)點(diǎn)的文本內(nèi)容。
// 空字符串
var text1 = new Text();
// 非空字符串
var text2 = new Text('This is a text node');
注意，由于空格也是一個(gè)字符，所以哪怕只有一個(gè)空格，也會(huì)形成文本節(jié)點(diǎn)。比如，<p> </p>包含一個(gè)空格，它的子節(jié)點(diǎn)就是一個(gè)文本節(jié)點(diǎn)。
文本節(jié)點(diǎn)除了繼承Node接口，還繼承了CharacterData接口。Node接口的屬性和方法請(qǐng)參考《Node 接口》一章，這里不再重復(fù)介紹了，以下的屬性和方法大部分來(lái)自CharacterData接口。
Text 節(jié)點(diǎn)的屬性
data
data屬性等同于nodeValue屬性，用來(lái)設(shè)置或讀取文本節(jié)點(diǎn)的內(nèi)容。
// 讀取文本內(nèi)容
document.querySelector('p').firstChild.data
// 等同于
document.querySelector('p').firstChild.nodeValue
// 設(shè)置文本內(nèi)容
document.querySelector('p').firstChild.data = 'Hello World';
wholeText
wholeText屬性將當(dāng)前文本節(jié)點(diǎn)與毗鄰的文本節(jié)點(diǎn)，作為一個(gè)整體返回。大多數(shù)情況下，wholeText屬性的返回值，與data屬性和textContent屬性相同。但是，某些特殊情況會(huì)有差異。
舉例來(lái)說(shuō)，HTML 代碼如下。
<p id="para">A <em>B</em> C</p>
這時(shí)，文本節(jié)點(diǎn)的wholeText屬性和data屬性，返回值相同。
var el = document.getElementById('para');
el.firstChild.wholeText // "A "
el.firstChild.data // "A "
但是，一旦移除<em>節(jié)點(diǎn)，wholeText屬性與data屬性就會(huì)有差異，因?yàn)檫@時(shí)其實(shí)<p>節(jié)點(diǎn)下面包含了兩個(gè)毗鄰的文本節(jié)點(diǎn)。
el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "
length
length屬性返回當(dāng)前文本節(jié)點(diǎn)的文本長(zhǎng)度。
(new Text('Hello')).length // 5
nextElementSibling，previousElementSibling
nextElementSibling屬性返回緊跟在當(dāng)前文本節(jié)點(diǎn)后面的那個(gè)同級(jí)元素節(jié)點(diǎn)。如果取不到元素節(jié)點(diǎn)，則返回null。
// HTML 為
// <div>Hello <em>World</em></div>
var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// <em>World</em>
previousElementSibling屬性返回當(dāng)前文本節(jié)點(diǎn)前面最近的同級(jí)元素節(jié)點(diǎn)。如果取不到元素節(jié)點(diǎn)，則返回null：。
Text 節(jié)點(diǎn)的方法
appendData()，deleteData()，insertData()，replaceData()，subStringData() #
以下5個(gè)方法都是編輯Text節(jié)點(diǎn)文本內(nèi)容的方法。
appendData()：在Text節(jié)點(diǎn)尾部追加字符串。deleteData()：刪除Text節(jié)點(diǎn)內(nèi)部的子字符串，第一個(gè)參數(shù)為子字符串開(kāi)始位置，第二個(gè)參數(shù)為子字符串長(zhǎng)度。insertData()：在Text節(jié)點(diǎn)插入字符串，第一個(gè)參數(shù)為插入位置，第二個(gè)參數(shù)為插入的子字符串。replaceData()：用于替換文本，第一個(gè)參數(shù)為替換開(kāi)始位置，第二個(gè)參數(shù)為需要被替換掉的長(zhǎng)度，第三個(gè)參數(shù)為新加入的字符串。subStringData()：用于獲取子字符串，第一個(gè)參數(shù)為子字符串在Text節(jié)點(diǎn)中的開(kāi)始位置，第二個(gè)參數(shù)為子字符串長(zhǎng)度。
// HTML 代碼為
// <p>Hello World</p>
var pElementText = document.querySelector('p').firstChild;
pElementText.appendData('!');
// 頁(yè)面顯示 Hello World!
pElementText.deleteData(7, 5);
// 頁(yè)面顯示 Hello W
pElementText.insertData(7, 'Hello ');
// 頁(yè)面顯示 Hello WHello
pElementText.replaceData(7, 5, 'World');
// 頁(yè)面顯示 Hello WWorld
pElementText.substringData(7, 10);
// 頁(yè)面顯示不變，返回"World "
remove()
remove方法用于移除當(dāng)前Text節(jié)點(diǎn)。
// HTML 代碼為
// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
// 現(xiàn)在 HTML 代碼為
// <p></p>
splitText()
splitText方法將Text節(jié)點(diǎn)一分為二，變成兩個(gè)毗鄰的Text節(jié)點(diǎn)。它的參數(shù)就是分割位置（從零開(kāi)始），分割到該位置的字符前結(jié)束。如果分割位置不存在，將報(bào)錯(cuò)。
分割后，該方法返回分割位置后方的字符串，而原Text節(jié)點(diǎn)變成只包含分割位置前方的字符串。
// html 代碼為 <p id="p">foobar</p>
var p = document.getElementById('p');
var textnode = p.firstChild;
var newText = textnode.splitText(3);
newText // "bar"
textnode // "foo"
父元素節(jié)點(diǎn)的normalize方法可以將毗鄰的兩個(gè)Text節(jié)點(diǎn)合并。
接上面的例子，文本節(jié)點(diǎn)的splitText方法將一個(gè)Text節(jié)點(diǎn)分割成兩個(gè)，父元素的normalize方法可以實(shí)現(xiàn)逆操作，將它們合并。
p.childNodes.length // 2
// 將毗鄰的兩個(gè) Text 節(jié)點(diǎn)合并
p.normalize();
p.childNodes.length // 1
DocumentFragment 節(jié)點(diǎn)
DocumentFragment節(jié)點(diǎn)代表一個(gè)文檔的片段，本身就是一個(gè)完整的 DOM 樹(shù)形結(jié)構(gòu)。它沒(méi)有父節(jié)點(diǎn)，parentNode返回null，但是可以插入任意數(shù)量的子節(jié)點(diǎn)。它不屬于當(dāng)前文檔，操作DocumentFragment節(jié)點(diǎn)，要比直接操作 DOM 樹(shù)快得多。
它一般用于構(gòu)建一個(gè) DOM 結(jié)構(gòu)，然后插入當(dāng)前文檔。document.createDocumentFragment方法，以及瀏覽器原生的DocumentFragment構(gòu)造函數(shù)，可以創(chuàng)建一個(gè)空的DocumentFragment節(jié)點(diǎn)。然后再使用其他 DOM 方法，向其添加子節(jié)點(diǎn)。
var docFrag = document.createDocumentFragment();
// 等同于
var docFrag = new DocumentFragment();
var li = document.createElement('li');
li.textContent = 'Hello World';
docFrag.appendChild(li);
document.querySelector('ul').appendChild(docFrag);
上面代碼創(chuàng)建了一個(gè)DocumentFragment節(jié)點(diǎn)，然后將一個(gè)li節(jié)點(diǎn)添加在它里面，最后將DocumentFragment節(jié)點(diǎn)移動(dòng)到原文檔。
注意，DocumentFragment節(jié)點(diǎn)本身不能被插入當(dāng)前文檔。當(dāng)它作為appendChild()、insertBefore()、replaceChild()等方法的參數(shù)時(shí)，是它的所有子節(jié)點(diǎn)插入當(dāng)前文檔，而不是它自身。一旦DocumentFragment節(jié)點(diǎn)被添加進(jìn)當(dāng)前文檔，它自身就變成了空節(jié)點(diǎn)（textContent屬性為空字符串），可以被再次使用。如果想要保存DocumentFragment節(jié)點(diǎn)的內(nèi)容，可以使用cloneNode方法。
document
.querySelector('ul')
.appendChild(docFrag.cloneNode(true));
上面這樣添加DocumentFragment節(jié)點(diǎn)進(jìn)入當(dāng)前文檔，不會(huì)清空DocumentFragment節(jié)點(diǎn)。
下面是一個(gè)例子，使用DocumentFragment反轉(zhuǎn)一個(gè)指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)的順序。
function reverse(n) {
var f = document.createDocumentFragment();
while(n.lastChild) f.appendChild(n.lastChild);
n.appendChild(f);
}
DocumentFragment節(jié)點(diǎn)對(duì)象沒(méi)有自己的屬性和方法，全部繼承自Node節(jié)點(diǎn)和ParentNode接口。也就是說(shuō)，DocumentFragment節(jié)點(diǎn)比Node節(jié)點(diǎn)多出以下四個(gè)屬性。
children：返回一個(gè)動(dòng)態(tài)的HTMLCollection集合對(duì)象，包括當(dāng)前DocumentFragment對(duì)象的所有子元素節(jié)點(diǎn)。firstElementChild：返回當(dāng)前DocumentFragment對(duì)象的第一個(gè)子元素節(jié)點(diǎn)，如果沒(méi)有則返回null。lastElementChild：返回當(dāng)前DocumentFragment對(duì)象的最后一個(gè)子元素節(jié)點(diǎn)，如果沒(méi)有則返回null。childElementCount：返回當(dāng)前DocumentFragment對(duì)象的所有子元素?cái)?shù)量。
更多建議：