Text节点和DocumentFragment节点

Text节点的概念

Text节点代表Element节点和Attribute节点的文本内容。如果一个节点只包含一段文本，那么它就有了text子节点，代表该节点的文本内容。

通常我们使用Node节点的firstChild、nextSibling等属性获取Text节点，或者使用Document节点的createTextNode方法创造一个Text节点。

// 获取text节点
var textNode = document.querySeletor('p').firstChild;

// 创造text节点
var textNode = document.createTextNode('Hi');
document.querySelector('div').appendChild(textNode);

浏览器原生提供Text构造函数。他返回一个Text节点。它的参数就是Text节点的文本内容。

var text1 = new Text();
var text2 = new Text("This is a text node");

注意，由于空格也是一个字符，哪怕只有一个空格，也会生成Text节点。

Text节点除了继承Node节点的属性和方法，还继承了CharacterData接口。

Text节点的属性

data

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

document.querySelector('p').firstChild.data

document.querySelector('p').firstChild.nodeValue

document.querySelector('p').firstChild.data = 'Hello World';

wholeText

WholeText属性将当前Text节点与毗邻的text的节点，作为一个整体返回。大多数情况下，wholeText属性的返回值，与data属性和textContent属性相同。但是某些情况下会有差异。

'para">A B C

这时，Text节点的wholeText属性和data属性，返回值相同。

var el = document.getElementById("para");
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

但是一旦删除em节点，wholeText属性与data属性就会有差异，因为这时其实P节点下面包含两个毗邻的Text节点。

el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "

length

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

(new Text('Hello')).length // 5

nextElementSibiling

nextElementSibling属性返回紧跟在当前Text节点后面那个同级Element节点。如果取不到这样的节点，则返回NULL。

<div>Hello <em>worldem>div>
var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// <em>Worldem>

previousElementSibling

previousElementSibling属性返回当前Text节点前面最近的那个Element节点。如果取不到这样的节点，则返回NULL。

Text节点的方法

appendData(),deleteData(),insertData(),replaceData(),subStringData()

以下5个方法都是编辑text节点文本内容的方法。

appendData方法用于在Text节点尾部追加字符串。

deleteData方法用于删除Text节点内部的子字符串，第一个为子字符串的位置，第二个为子字符串的长度。

insertData方法用于在Text节点插入字符串，第一个参数为插入位置，第二个参数为需要被替换的长度，第三个参数为新加入的字符串。

replaceData方法用户替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。

subStringData方法用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度。

Hello World
var pElementText = document,querySelentor('p').firstChild;
pElementText.appendData('!');
pElementText.deleteData(7,5);
pElementText.insertData(7,'Hello ');
pElementText.replaceData(7,5,'world');
pElementText.substringData(7,10);

remove()

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

<p>Hello Worldp>
document.querySelector('p').firstChild.remove();
// <p>p>

splitText(),normalize()

splitText方法将Text节点一分为二，变成两个毗邻的Text节点。它的参数就是分隔位置(从零开始)，分割到该位置的字符串结束。如果分割位置不存在，将报错。

分割后，该方法返回分割位置后后方的字符串，而原Text节点变成只包含分割位置前方的字符串。

var p = document.getElementById('p');
var textnode = p.firstChild;

var newText = textnode.splitText(3);
newText // "bar"
textnode // "foo"

normalize方法可以将毗邻的两个Text节点合并。

接上面的例子，splitText方法将一个Text节点分割成两个，normalize方法可以实现逆操作，将它们合并。

p.childNodes.length // 2

p.normalize();
p.childNodes.length // 1

DocumentFragment节点

DocumentFragment节点代表一个文档片段，本身就是一个完整的DOM树形结构。它没有父节点，parentNode返回null,但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作DOM树快地多。

它一般用于构建一个DOM结构，然后插入当前文档。document.createDocumentFragment方法，以及浏览器原生的DocumentFragment构造函数，可以创建一个空的DocumentFragment节点，然后再使用其他DOM方法，向其添加子节点。

var docFrag = document.createDocumentFragement();
// or
var docFrag = new DocumentFragment();

var li = document.createElement('li');
li.textContent = "Hello World";
docFrag.appendChild(li);

document.querySeletor('ul').appendChild(docFrag);

上面代码创建了一个DocumentFragment节点，然后将一个li节点添加在它里面，最后将DocumentFragment节点移动到原文档。

注意，DocumentFragment节点本身不能被插入当前文档。当它作为appendChild()、insertBefore()、replaceChild()等方法参数时，是它的子节点插入当前稳当，而不是它自身。一旦DocumentFragment节点被添加进当前文档，它自身就变成空节点(textContent属性为空字符串)，可以被再次使用。如果想要保存DocumentFragment节点的内容，可以使用clonenode方法。

document.queryselector('ul').appendChild(docFrag.cloneNode(true));

下面是一个例子，使用DocumentFragment返回一个指定节点的所有子节点的顺序。

function reverse(n){
    var f = document.createDocumentFragment();
    while(n.lastChild) f.appendChild(n.lastChild);
    n.appendChild(f);
}

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

children:返回一个动态的HTMLCollection集合对象，包括当前DocumentFragment对象的所有子元素节点。
firstElementChild:返回当前DocumentFragment对象的字一个子元素节点，如果没有则返回null。
laseElementChild：返回当前DocumentFragment对象的最后一个子元素节点，如果没有则返回null。
childElementConut:返回当前DocumentFragment对象的所有子元素数量。