DOM《Text节点》

概述

• 文本节点代表元素节点和属性节点的文本内容。如果一个节点只包含一段文字，那么它就有一个文本子节点，代表该节点的文本内容。
• 文本节点除了继承Node接口还继承了CharacterData接口。

属性

data

• 等同于nodeValue属性，用来读写文本节点的内容。

<a href="http://www.baidu.com">百度一下</a>

document.getElementsByTagName('a')[0].firstChild.data  // '百度一下'

wholeText

• 将当前文本节点与毗邻的文本节点作为一个整体返回。

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

var el = document.getElementById('para');
// 返回值相同
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

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

length

• 返回当前文本节点的长度。

nextElementSibling

返回紧跟在当前文本节点后面的那个同级元素节点，如果没有则返回null。

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

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

previousElementSibling

• 返回当前文本节点前面最近的同级元素节点，如果没有则返回null。

方法

appendData()

• 在文本节点追加字符串。

deleteData()

• 删除文本节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度。

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.deleteData(0, 5);
// 结果
// <p>world!</p>

insertData()

• 文本节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串。

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.insertData(0, 'zby');
// 结果
// <p>zbyHello world!</p>

replaceData()

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

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.replaceData(0, 5, 'HELLO');
// 结果
// <p>HELLO world!</p>

substringData()

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

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.substringData(0, 5);  // 'Hello'

remove()

• 移除当前文本节点。

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.remove(); 
// 结果
// <p></p>

splitText()

• 将文本节点一分为二，变成两个毗邻的文本节点。参数是分割位置（从0开始），分割到该位置的字符前结束。

<p>Hello world!</p>

let p = document.getElementsByTagName('p')[0];
p.firstChild.splitText(5);  // " world!"
// 结果

<p>
  "Hello"
  " world!"
</p>