Text节点和DocumentFragment节点

Text节点的概念

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只有包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。
通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。

// 获取文本节点
var textNode = document.querySelector("p").firstChild;

// 创造文本节点
var textNode = document.createTextNode("Hi");
document.querySelector("div").appendChild(textNode);

浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。
注意，由于空格也是一个字符，所以哪怕只有一个空格，也会形成文本节点。比如，<p> </p>包含一个空格，它的子节点就是一个文本节点。
文本节点除了继承Node接口，还继承了CharacterData接口。Node接口的属性和方法请参考《Node接口》一章，这里不再重复介绍了，以下的属性和方法大部分来自CharacterData接口。

Text节点的属性

data

data属性等同于nodeValue属性，用来设置或读取文本节点的内容。

// 读取文本内容
document.querySelector("p").firstChild.data;
document.querySelector("p").firstChild.nodeValue;

// 设置文本内容
document.querySelector("p").firstChild.data = "hello world";

wholeText

wholeText属性将当前文本节点与毗邻的文本节点，作为一个整体返回。大多数情况下，wholeText属性的返回值，与data属性和textContent属性相同。但是，某些情况下会有差异。
举例来说，HTML代码如下。

<p id="para">A <em>B</em> C</p>

这时，文本节点的wholeText属性和data属性，返回值相同。但是一旦移除<em>节点，wholeText属性与data属性就会有差异。

length

length属性返回当前文本节点的文本长度。

nextElementSibling，previousElementSibling

nextElementSibling属性返回紧跟在当前文本节点后面的那个同级元素节点。如果取不到元素节点，则返回null。
previousElementSibling属性返回当前文本节点前面最近的同级元素节点。如果取不到元素节点，则返回null。

Text节点的方法

appendData()，deleteData()，insertData()，replaceData()，subStringData()

一下五个方法都是编辑Text节点文本内容的方法。

appendData()：在Text节点尾部追加字符串。
deleteData()：删除Text节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度。
insertData()：在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串。
replaceData()：用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。
subStringData()：用户获取子字符串，第一个参数为子字符串在Text节点的开始位置，第二个参数为字符串长度。

remove()

remove方法用于移除当前Text节点。

splitText()

splitText方法将Text一分为二，变成两个毗邻的Text节点。它的参数就是分割位置，如果分割位置不存在，将报错。

DocumentFragment节点

DocumentFragment节点代表一个文档的片段，本身就是一个完整的DOM树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作DOM树快很多。
它一般用于构建一个DOM结构，然后插入当前的文档。
document.createDocumentFragment方法，以及浏览器原生的DocumentFragment构造函数，可以创建一个空的DocumentFragment节点。然后再使用其他DOM方法，向其添加子节点。
注意，DocumentFragment节点本身不能被插入当前文档。当它作为appendChild()、insertBefore()、replaceChild()等方法的参数时，是它的所有子节点插入当前文档，而不是它本身。一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点（textContent属性为空字符串），可以被再次使用。如果想要保存DocumentFragment节点的内容，可以使用cloneNode方法。

document.querySelector("ul").appendChild(docFrag.cloneNode(true));

DocumentFragment节点对象没有自己的属性和方法，全部继承自Node节点和ParentNode接口。也就是说，DocumentFragment节点比Node节点多出一下四个属性。

children：返回一个动态的HTMLCollection集合对象，包括当前DocumentFragment对象的所有子元素节点。
firstElementChild：返回当前DocumentFragment对象的第一个子元素节点，如果没有则返回null。
lastElementChild：类似firstElementChild。
childElementCount：返回当前DocumentFragment对象所有子元素数量。