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构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。

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

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

注意，由于空格也是一个字符，所以哪怕只有一个空格，也会形成文本节点。比如，

文本节点除了继承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 代码如下。

A B C

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

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

但是，一旦移除节点，wholeText属性与data属性就会有差异，因为这时其实

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

length

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

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

nextElementSibling，previousElementSibling

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

// HTML 为
// 
Hello World
var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// World

previousElementSibling属性返回当前文本节点前面最近的同级元素节点。如果取不到元素节点，则返回null：。

Text 节点的方法

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

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

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

// HTML 代码为
// 
Hello World
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 代码为
// 
Hello World
document.querySelector('p').firstChild.remove()
// 现在 HTML 代码为
// 

splitText()

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

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

// html 代码为 
foobar
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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com