深入理解DOM節點類型第二篇——文本節點Text - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　文本節點顧名思義指向文本的節點，網頁上看到的文字內容都屬于文本節點。該節點簡單直觀，本文將詳細介紹該部分內容

特征

　　文本節點由Text類型表示，包含的是純文本內容，但文本節點是對象類型

<div id="box">內容</div>
<script>
    console.log(box.firstChild);//"內容"
    console.log(typeof box.firstChild);//'object'
</script>

　　純文本內容中的HTML字符會被轉義，關于轉義字符的詳細情況移步至此

<div id="box">&lt;內容&gt;</div>
<script>
    console.log(box.firstChild);//"<內容>""
</script>

　　文本節點的三個node屬性——nodeType、nodeName、nodeValue分別是3、'#text'和節點所包含的文本，其父節點parentNode指向包含該文本節點的元素節點，文本節點沒有子節點

　　[注意]DOM樹中共存在12種節點類型，詳細情況移步至此

<div id="box">test</div>
<script>
var oTxt = box.firstChild;
console.log(oTxt.nodeType);//3
console.log(oTxt.nodeValue);//test
console.log(oTxt.nodeName);//'#text'
console.log(oTxt.parentNode);//<div>
console.log(oTxt.childNodes);//[]
</script>

空白文本節點

　　關于文本節點，遇到最多的兼容問題是空白文本節點問題。IE8-瀏覽器不識別空白文本節點，而其他瀏覽器會識別空白文本節點

<div id="box">
    <div>1</div>
</div>
<script>
//標準瀏覽器輸出[text, div, text]，text表示空白文本節點
//IE8-瀏覽器輸出[div]，并不包含空白文本節點
console.log(box.childNodes);    
</script>

屬性

data

　　文本節點的data屬性與nodeValue屬性相同

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//test test true
console.log(oTest.nodeValue,oTest.data,oTest.data === oTest.nodeValue);
</script>

wholeText

　　wholeText屬性將當前Text節點與毗鄰的Text節點，作為一個整體返回。大多數情況下，wholeText屬性的返回值，與data屬性和textContent屬性相同。但是，某些特殊情況會有差異

　　[注意]IE8-瀏覽器不支持

<div id="test">123</div>
<script>
console.log(test.firstChild.wholeText);//123
console.log(test.firstChild.data);//123
//以索引1為指定位置分割為兩個文本節點
test.firstChild.splitText(1);
console.log(test.firstChild.wholeText);//123
console.log(test.firstChild.data);//1
</script>

length

　　文本節點的length屬性保存著節點字符的數目，而且nodeValue.length、data.length也保存著相同的值

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//4 4 4
console.log(oTest.length,oTest.nodeValue.length,oTest.data.length);
</script>

方法

createTextNode()

　　createTextNode()方法用于創建文本節點，這個方法接收一個參數——要插入節點中的文本

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = document.createTextNode('<strong>hello</strong> world!');
oBox.appendChild(oText);
//'123&lt;strong&gt;hello&lt;/strong&gt; world!'
console.log(oBox.innerHTML);
//此時，頁面中有兩個文本節點
console.log(oBox.childNodes.length);
</script>

normalize()

　　normalize()方法的作用是合并相鄰的文本節點，該方法在文本節點的父節點——元素節點上調用

　　[注意]IE9+瀏覽器無法正常使用該方法

<div id="box">0</div>
<script>
var oText1 = document.createTextNode('1');
var oText2 = document.createTextNode('2');
box.appendChild(oText1);
box.appendChild(oText2);
console.log(box.childNodes);//[text, text, text]
console.log(box.childNodes.length);//3
box.normalize();
//IE9+瀏覽器返回[text,text]，而其他瀏覽器返回[text]
console.log(box.childNodes);
//IE9+瀏覽器返回'01'，而其他瀏覽器返回'012'
console.log(box.childNodes[0]);
//IE9+瀏覽器返回2，使用該方法時只能將所有的文本節點減1；其他瀏覽器正常，返回2
console.log(box.childNodes.length);//1
</script>

splitText()

　　與normalize()方法作用相反，splitText()方法將一個文本節點分成兩個文本節點，即按照指定的位置分割nodeValue值。原來的文本節點將包含從開始到指定位置之前的內容。這個方法會返回一個新文本節點，包含剩下的文本。splitText()方法返回的節點與原節點的parentNode相同

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var newNode = oBox.firstChild.splitText(1);
console.log(newNode,newNode === oBox.lastChild);//'23' true
console.log(oBox.firstChild);//'1'
</script>

appendData()

　　appendData(text)方法將text添加到節點的末尾，該方法無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.appendData('4'));//undefined
console.log(oText.data);//'1234'
console.log(oBox.childNodes.length);//1
</script>

deleteData()

　　deleteData(offset,count)方法從offset指定的位置開始刪除count個字符，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.deleteData(0,2));//undefined
console.log(oText.data);//'3'
console.log(oBox.childNodes.length);//1
</script>

insertData()

　　insertData(offset,text)方法在offset指定的位置插入text，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.insertData(1,'test'));//undefined
console.log(oText.data);//'1test23'
console.log(oBox.childNodes.length);//1
</script>

replaceData()

　　replaceData(offset,count,text)方法用text替換從offset指定位置開始到offset+count為止的文本，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.replaceData(1,1,"test"));//undefined
console.log(oText.data);//'1test3'
console.log(oBox.childNodes.length);//1
</script>

substringData()

　　substringData(offset,count)方法提取從offset指定的位置開始到offset+count為止處的字符串，并返回該字符串。原來的文本節點無變化

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.substringData(1,1));//'2'
console.log(oText);//'123'
</script>

性能

　　通過上面的方法介紹，我們會發現，文本節點的操作與字符串的操作方法相當類似。一般地，我們獲取文本都用innerHTML，然后再去字符串的操作方法去操作。下面對兩者的性能進行對比分析

　　【1】首先，對replaceData()和replace()這兩個方法進行比較。replace()方法又分為兩個方法，一個是在循環中直接對innerHTML進行賦值；另一個是在循環中對變量進行賦值，最后再賦值給innerHTML

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;    
var str = oBox.innerHTML;

function stringTest1(){
    for(var i = 0; i < 1000000; i++){
        oBox.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
    }   
}
var start1 = Date.now();
stringTest1();
var stop1 = Date.now();
result1 = stop1 - start1;
console.log('str1',result1)//2351

/*********************************/
function stringTest2(){
    for(var i = 0; i < 1000000; i++){
        str.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
    }   
}
var start2 = Date.now();
stringTest2();
oBox.innerHTML = str;
var stop2 = Date.now();
result2 = stop2 - start2;
console.log('str2',result2)//408

/*********************************/
function dataTest1(){
    for(var i = 0; i < 1000000; i++){
        oText.replaceData(1,1,Math.floor(Math.random() * 9 + 1))    
    }  
}
var start3 = Date.now();
dataTest1();
var stop3 = Date.now();
result3 = stop3 - start3;
console.log('data',result3)//327
</script>

　　從結果中可以看出，在100萬次的循環中，直接操作innerHTML開銷較大，操作文本節點的的開銷最小

　　【2】對substring()和substringData()方法進行比較，這兩種方法都用于提取子串

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;    
var str = oBox.innerHTML;

function stringTest(){
    for(var i = 0; i < 10000000; i++){
       str.substring(Math.floor(Math.random() * 2),2);
    }   
}
var start = Date.now();
stringTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//364
/*********************************/
function dataTest(){
    for(var i = 0; i < 10000000; i++){
       oText.substringData(Math.floor(Math.random() * 2),1);
    }   
}
var start = Date.now();
dataTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//1195
</script>