JavaScrip节点类型之Text节点与文档片段

基本概念

Text类型包含的是可以照字面解释的纯文本内容，不能包含HTML代码。

Text节点的基本属性

nodeType的值为3；
nodeName的值为"#text"；
nodeValue的值为节点所包含的文本；
parentNode是一个Element；

*Text类型没有子节点。

Text节点的常用属性

data：可以通过nodeValue属性或data属性访问或修改Text节点中包含的文本，这两个属性中包含的值相同。
length：该属性是只读属性，保存着节点中字符的数目。

例子：

<p>hello</p>

var p = document.getElementsByTagName("p")[0]

console.log(p.childNodes[0].nodeValue); //输出：hello
console.log(p.firstChild.data); //输出：hello
console.log(p.firstChild.length); //输出：5

//也可以直接修改文本内容
p.childNodes[0].data = "world";

Text节点的常用方法

document.createTextNode()：创建新文本节点，这个方法接受一个参数：要插入节点中的文本。

例子：

var p=document.createElement("p")
var textNode=document.createTextNode("hello")
p.appendChild(textNode)
document.body.appendChild(p)

浏览器截图：

normalize()：将所有文本节点合并成一个节点。

例子：

var p = document.createElement("p")
var textNode1 = document.createTextNode("hello")
var textNode2 = document.createTextNode(" world")
p.appendChild(textNode1); 
p.appendChild(textNode2);
document.body.appendChild(p);

console.log(p.childNodes.length); //输出：2
console.log(p.firstChild.data); //输出：hello
p.normalize();
console.log(p.childNodes.length); //输出：1
console.log(p.firstChild.data); //输出：hello world

splitText()： 这个方法会将一个文本节点按照指定的位置分割成两个文本节点。

例子：

var p = document.createElement("p")
var textNode = document.createTextNode("hello world")
p.appendChild(textNode)
document.body.appendChild(p)

console.log(p.childNodes.length);  //输出：1
console.log(p.firstChild.nodeValue);  //输出：hello world
console.log(p.firstChild.splitText(5).nodeValue);  //输出：world
console.log(p.childNodes.length);  //输出：2
console.log(p.firstChild.nodeValue);  //输出：hello

DocumentFragment节点(文档片段)

DocumentFragment节点在文档中没有对应的标记，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。

使用document.createDocumentFragment()方法创建文档片段。
使用appendChild()或insertBefore()将文档片段中的内容一次性地添加到文档中。

例子：

var fragment=document.createDocumentFragment()
var ul=document.createElement("ul")
var li=null

for (var i=0;i<3;i++){
    li=document.createElement("li")
    li.appendChild(document.createTextNode("Item " + (i+1)))
    fragment.appendChild(li)
}

ul.appendChild(fragment)
document.body.appendChild(ul)

浏览器截图：

*实际上只会将文档片段的所有子节点添加到相应位置上；文档片段本身永远不会成为文档树的一部分。

---

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。