Text 节点和 DocumentFragment 节点

本文更具JavaScript标准参考教程-阮一峰 整理笔记

Text节点

文本节点代表元素节点和属性节点的文本内容。我们通常可以使用父节点的firstChild， nextSibling等属性获取文本节点。
可以使用document.createTextNode()方法创建文本节点
浏览器提供了一个原生的Text构造函数， 它返回一个文本节点实例

// 空字符串
var text1 = new Text(); //""

// 非空字符串
var text2 = new Text('This is a text node');
//"This is a text node"

空字符串也是一个文本节点

Text节点属性

data

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

//<div id="msg">你好</div>
// 读取文本内容
document.querySelector('div').firstChild.data   //"你好"
// 等同于
document.querySelector('div').firstChild.nodeValue//"你好"

// 设置文本内容
document.querySelector('div').firstChild.data = 'Hello World';
//<div id="msg">Hello World</div>

wholeText

wholeText将当前文本节点和毗邻的文本节点作为一个整体返回。通常和data和textContent属性相同
特殊情况：

<p id="para">A <em>B</em> C</p>
var el = document.getElementById('para');
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

若移除<em>节点则wholeText就会和属性有差异

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

其他属性

• length属性返回当前文本节点的文本长度
• nextElementSibling返回当前文本节点后面的同级元素节点， 取不到则返回null
• previousElementSibling属性返回当前文本节点前面的同级元素节点， 取不到则返回null

Text文本节点的方法

它有常用的5个方法

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

// 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() 这个方法用于移除当前Text节点

// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
//删除后为： <p></p>

• splitText()方法将文本节点一分为二，变成两个相邻的节点

// <p id="p">foobar</p>
var p = document.getElementById('p');
var textnode = p.firstChild;

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

• 父元素可以通过normalize()方法将它们合并

p.childNodes.length // 2

// 将毗邻的两个 Text 节点合并
p.normalize();
p.childNodes.length // 1

DocumentFragment节点

• DocumentFragment节点表示文档片段， 也是一个完整的DOM树形结构。 但是它没有父节点。
• 我们可以使用document.createDocumentFragment()方法和new DocumentFragment()方法创建它
• DocumentFragment节点只能将其子节点插入文档中， 它本身不可以。
• 将其子节点的插入文档可以用appendChild(), insertBefore()等， DocumentFragment节点做函数的参数

DocumentFragment节点对象没有自己的属性和方法， 它全部继承自Node节点和ParentNode节点。因此它还可以使用下面四个属性：

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