javascript基础----Text节点和DocumentFragment节点

Text节点的概念

Text节点代表Element节点和Attribute节点的文本内容

// 获取Text节点

var textNode = document.querySelector('p').firstChild;

 

// 创造Text节点

var textNode = document.createTextNode('Hi');

document.querySelector('div').appendChild(textNode);

 

 

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属性相同。但是，某些特殊情况会有差异。

 

举例来说，HTML代码如下。

 

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

这时，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节点的文本长度。

nextElementSibling

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

 

// HTML为

// <div>Hello <em>World</em></div>

 

var tn = document.querySelector('div').firstChild;

tn.nextElementSibling

// <em>World</em>

 

previousElementSibling

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

Text节点的方法

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

// HTML代码为

// <p>Hello World</p>

var pElementText = document.querySelector('p').firstChild;

 

pElementText.appendData('!');

// 页面显示 Hello World!

pElementText.deleteData(7,5);

// 页面显示 Hello W

pElementText.insertData(7,'Hello ');

// 页面显示 Hello WHello

pElementText.replaceData(7,5,'World');

// 页面显示 Hello WWorld

pElementText.substringData(7,10);

// 页面显示不变，返回"World "

 

 

remove()

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

 

// HTML代码为

// <p>Hello World</p>

 

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

// 现在页面代码为

// <p></p>

 

splitText()，normalize()

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

 

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

 

// html代码为 <p id="p">foobar</p>

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

 

// 将毗邻的两个Text节点合并

p.normalize();

p.childNodes.length // 1

 

 

DocumentFragment节点

DocumentFragment节点代表一个文档的片段，本身就是一个完整的DOM树形结构

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

var docFrag = document.createDocumentFragment();

// or

var docFrag = new DocumentFragment();

 

var li = document.createElement('li');

li.textContent = 'Hello World';

docFrag.appendChild(li);

 

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

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