Text 节点

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。

Text节点属性

data

data属性用来设置或读取文本节点的内容

xxxxxxxxxx
// 读取文本内容
document.querySelector('p').firstChild.data

// 设置文本内容
document.querySelector('p').firstChild.data = 'Hello World';

length

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

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

Text节点方法

appendData()

在Text节点尾部追加字符串

xxxxxxxxxx
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.appendData('!');// 页面显示 Hello World!

deleteData()

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

xxxxxxxxxx
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.deleteData(7, 5);
// 页面显示 Hello W

insertData()

在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串

xxxxxxxxxx
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.insertData(7, 'Hello ');
// 页面显示 Hello WHello

replaceData()

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

xxxxxxxxxx
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.replaceData(7, 5, 'World');
// 页面显示 Hello WWorld

substringData()

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

xxxxxxxxxx
// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.substringData(7, 10); 
// 页面显示不变，返回"World "

remove()

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

xxxxxxxxxx
// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
// 现在 HTML 代码为
// <p></p>

实时效果反馈

1. 以下那个属性是读取文本的Text节点属性：

A innerHTML

B innerText

C data

D getData

2. 下列代码是给Text节点尾部追加内容，横线处应该填写的代码是：

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

A deleteData

B insertData

C replaceData

D appendData

答案

1=>C 2=>D