DOM文本节点TEXT

定义

　　文本节点由Text类型表示，包含的是纯文本内容，纯文本内容中的HTML字符会被转义。

特征　

　　nodeType:3
　　nodeName:#text
　　nodeValue:节点所包含的文本
　　parentNode:Element节点
　　childNode:没有子节点

<div class="box" id="box">test</div>
<script>
var oBox = document.getElementById(‘box‘);
var oTest = oBox.firstChild;
//3 #text test
console.log(oTest.nodeType,oTest.nodeName,oTest.nodeValue);
//<div> []
console.log(oTest.parentNode,oTest.childNodes);
</script>

　　[注意]每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在

　　　　[a]<div></div>(没有内容，也就没有文本节点)

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
var oTest = oBox.firstChild;
console.log(oTest);//null
</script>
        [b]<div> </div>(有空格，因此有一个文本节点)
<div class="box" id="box"> </div>
<script>
var oBox = document.getElementById(‘box‘);
var oTest = oBox.firstChild;
//IE8-浏览器为null,因为其不识别空白文本节点；其他浏览器为" "
console.log(oTest);
</script>

　　　　[b]<div> </div>(有空格，因此有一个文本节点)

<div class="box" id="box"> </div>
<script>
var oBox = document.getElementById(‘box‘);
var oTest = oBox.firstChild;
//IE8-浏览器为null,因为其不识别空白文本节点；其他浏览器为" "
console.log(oTest);
</script>

属性

【data】

　　文本节点的data属性与nodeValue属性相同

<div class="box" 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>

【length】

　　文本节点的length属性保存着节点字符的数目，而且nodeValue.length、data.length也保存着相同的值

<div class="box" 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()方法用于创建文本节点，这个方法接收一个参数——要插入节点中的文本。在创建新文本的同时，也会为其设置ownerDocument属性

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
var oText = document.createTextNode(‘hello world!‘);
oBox.appendChild(oText);
console.log(oBox.innerHTML);//123hello world!
</script>

　　　　[注意]一般情况下，每个元素只有一个文本节点，但在某些情况下也可能包含多个文本子节点。如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
var oText = document.createTextNode(‘hello world!‘);
oBox.appendChild(oText);
console.log(oBox.innerHTML);//123hello world!
var oText2 = document.createTextNode(‘<text2>‘);
oBox.appendChild(oText2);
console.log(oBox.innerHTML);//123hello world!&lt;text&gt;
console.log(oBox.childNodes.length)//3
</script>

【normalize()】

　　normalize()方法将包含两个或多个文本节点的父元素中的文本节点合并成一个。
　　[注意]IE9+浏览器无法正常使用该方法，返回的结果是所有的文本节点减1

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
var oText1 = document.createTextNode(‘1‘);
oBox.appendChild(oText1);
var oText2 = document.createTextNode(‘2‘);
oBox.appendChild(oText2);
var oText3 = document.createTextNode(‘3‘);
oBox.appendChild(oText3);
console.log(oBox.childNodes.length)//4
oBox.normalize();
console.log(oBox.innerHTML);//123123
//IE9+浏览器返回3,使用该方法时只能将所有的文本节点减1；其他浏览器正常，返回1
console.log(oBox.childNodes.length)
</script>

【splitText()】

　　splitText()方法将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode相同。分割文本节点是从文本节点中提取数据的常用DOM解析技术。

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

【appendData()】

　　appendData(text)方法将text添加到节点的末尾

<div class="box" 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 class="box" 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 class="box" 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 class="box" 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
</script>