前面我們通過《介紹Text類型中appendData、deleteData、insertData、replaceData方法的使用方法》比較全面地介紹了Text文本類型方法，針對創(chuàng)建文本節(jié)點createTextNode()、規(guī)范化文本節(jié)點normalize()、分割文本節(jié)點splitText()三個重要的方法我們結(jié)合實例進行詳細介紹。

1.創(chuàng)建文本節(jié)點

可以使用document.createTextNode()創(chuàng)建新文本節(jié)點，這個方法接受一個參數(shù)——要插入節(jié)點 中的文本。與設(shè)置已有文本節(jié)點的值一樣，作為參數(shù)的文本也將按照HTML或XML的格式進行編碼：

var textNode=document. createTextNode("Hello worldf");

在創(chuàng)建新文本節(jié)點的同時，也會為其設(shè)置ownerDocument屬性。不過，除非把新節(jié)點添加到文 檔樹中已經(jīng)存在的節(jié)點中，否則我們不會在瀏覽器窗口中看到新節(jié)點。下面的代碼會創(chuàng)建一個

元素并向其中添加一條消息：

var element=document. createElement("div");

element.className= "message";

var textNode=document. createTextNode( "BaiHeng");

element. appendChild( textNode);

document.body. appendChild( element);

這個例子創(chuàng)建了一個新

元素并為它指定了值為"message "的 class特性。然后，又創(chuàng)建了一個文本節(jié)點，并將其添加到前面創(chuàng)建的元素中。最后一步，就是將這個元素添加到了文檔的

元素中，這樣就可以在瀏覽器中看到新創(chuàng)建的元素和文本節(jié)點了。

一般情況下，每個元素只有一個文本子節(jié)點。不過，在某些情況下也可能包含多個文本子節(jié)點，如下面的例子所示：

var element=document. createElement("div");

element. className= "message";

var textNode=document.createTextNode("BaiHeng!");

element. appendChild(textNode);

var anotherTextNode = document.createTextNode("network!");

element.appendChild(anotherTextNode);

document. body. appendChild( element);

如果兩個文本節(jié)點是相鄰的同胞節(jié)點，那么這兩個節(jié)點中的文本就會連起來顯示，中間不會有空格。

2.規(guī)范化文本節(jié)點

DOM文檔中存在相鄰的同胞文本節(jié)點很容易導(dǎo)致混亂，因為分不清哪個文本節(jié)點表示哪個字符串。另外，DOM文檔中出現(xiàn)相鄰文本節(jié)點的情況也不在少數(shù)，于是就催生了一個能夠?qū)⑾噜徫谋竟?jié)

點合并的方法。這個方法是由Node類型定義的(因而在所有節(jié)點類型中都存在)，名叫normalize()。

如果在一個包含兩個或多個文本節(jié)點的父元素上調(diào)用normalize()方法，則會將所有文本節(jié)點合并成 —個節(jié)點，結(jié)果節(jié)點的nodeValue等于將合并前每個文本節(jié)點的nodeValue值拼接起來的值。來看

一個例子：

var element=document. createElement("div");

element.className="message";

var textNode=document. createTextNode("BaiHeng Url:");

element.appendChild(textNode);

//例如：我們創(chuàng)建一個帶網(wǎng)址的文本節(jié)點;

var anotherTextNode=document. createTextNode("http://m.gimmickmag.com");

element. appendChild( anotherTextNode);

document.body. appendChild( element);

//做一些輸出測試添加的效果;

alert(element.childNodes.length); //2

element.normalize();

alert(element.childNodes.length); //1

alert(element.firstChild.nodeValue); //"BaiHeng Url:http://m.gimmickmag.com"

瀏覽器在解析文檔時永遠不會創(chuàng)建相鄰的文本節(jié)點。這種情況只會作為執(zhí)行DOM操作的結(jié)果出現(xiàn)。

3.分割文本節(jié)點

Text類型提供了一個作用與normalize()相反的方法：splitText()。這個方法會將一個文本節(jié)點分成兩個文本節(jié)點，即按照指定的位置分割nodeValue值。原來的文本節(jié)點將包含從開始到指定

位置之前的內(nèi)容，新文本節(jié)點將包含剩下的文本。這個方法會返回一個新文本節(jié)點，該節(jié)點與原節(jié)點的parentNode相同。來看下面的例子：

var element=document. createElement("div");

element.className= "message";

var textNode=document. createTextNode("Hello BaiHeng!");

element. appendChild( textNode);

document. body. appendChild( element);

var newNode = element.firstChild.splitText(5);

alert(element.firstChild.nodeValue); //"Hello"

alert(newNode.nodeValue); //"BaiHeng"

alert(element.childNodes.length); //2

在這個例子中，包含"Hello BaiHeng"的文本節(jié)點被分割為兩個文本節(jié)點，從位置5開始。位置5 是"Hello"和"BaiHeng!“之間的空格，因此原來的文本節(jié)點將包含字符串"Hello"，而新文本節(jié)點將包含文本"BaiHeng!(包含空格)。

分割文本節(jié)點是從文本節(jié)點中提取數(shù)據(jù)的一種常用DOM解析技術(shù)。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http: //m.gimmickmag.com 如轉(zhuǎn)載請注明出處!