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

1.創建文本節點

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

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

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

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

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

element.className= "message";

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

element. appendChild( textNode);

document.body. appendChild( element);

這個例子創建了一個新

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

元素中，這樣就可以在瀏覽器中看到新創建的元素和文本節點了。

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

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

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

2.規范化文本節點

DOM文檔中存在相鄰的同胞文本節點很容易導致混亂，因為分不清哪個文本節點表示哪個字符串。另外，DOM文檔中出現相鄰文本節點的情況也不在少數，于是就催生了一個能夠將相鄰文本節

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

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

一個例子：

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

element.className="message";

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

element.appendChild(textNode);

//例如：我們創建一個帶網址的文本節點;

var anotherTextNode=document. createTextNode("http://m.51yjwy.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.51yjwy.com"

瀏覽器在解析文檔時永遠不會創建相鄰的文本節點。這種情況只會作為執行DOM操作的結果出現。

3.分割文本節點

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

位置之前的內容，新文本節點將包含剩下的文本。這個方法會返回一個新文本節點，該節點與原節點的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"的文本節點被分割為兩個文本節點，從位置5開始。位置5 是"Hello"和"BaiHeng!“之間的空格，因此原來的文本節點將包含字符串"Hello"，而新文本節點將包含文本"BaiHeng!(包含空格)。

分割文本節點是從文本節點中提取數據的一種常用DOM解析技術。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡 http: //m.51yjwy.com 如轉載請注明出處!