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

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

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

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

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

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

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

element.className= "message";

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

element. appendChild( textNode);

document.body. appendChild( element);

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

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

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

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

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);

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

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

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

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

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

一個(gè)例子：

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

element.className="message";

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

element.appendChild(textNode);

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

var anotherTextNode=document. createTextNode("http://www.51yjwy.com");

element. appendChild( anotherTextNode);

document.body. appendChild( element);

//做一些輸出測(cè)試添加的效果;

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

element.normalize();

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

alert(element.firstChild.nodeValue); //"BaiHeng Url:http://www.51yjwy.com"

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

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

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

位置之前的內(nèi)容，新文本節(jié)點(diǎn)將包含剩下的文本。這個(gè)方法會(huì)返回一個(gè)新文本節(jié)點(diǎn)，該節(jié)點(diǎn)與原節(jié)點(diǎn)的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

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

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

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