DOM中text节点详解

        图中箭头所指的地方在DOM中就是text节点对象。下面将要了解：1，JavaScript中使用firstchild准确的找到需要修改的text节点(很明显一颗dom tree中不止一个text节点) ；2，使用JavaScript增加，删除，修改选定的text的内容。

目录

一，总览

二，属性详解

1，data属性

1.1定位到需要操作的text节点

1.2读取和修改选定的text节点内容

2，length属性

三，方法详解

1，appendData()

2，deleteData()

3，insertData()

4，replaceData()

5，substringData()

6，remove()

---

一，总览

        text节点的属性与方法如下。

二，属性详解

1，data属性

1.1定位到需要操作的text节点

1.2读取和修改选定的text节点内容

p.data;//读取内容
p.data = 'new context';//设置内容

2，length属性

p.length;//得到text内容长度

三，方法详解

1，appendData()

        在Text节点尾部追加字符串。

<p>Hello world</p>
var pElementText = document.queryselector('p');
pElementText.firstchild.appendData('!');//页面显示 Hello world!

2，deleteData()

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

<p>Hello world</p>
var pElementText = document.queryselector('p');
pElementText.firstchild.deleteData(5，7);//从第五个开始删除，一共删除7个
//页面显示 Hello

3，insertData()

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

<p>Hello world</p>
var pElementText = document.queryselector('p');
pElementText.firstchild.insertData(7,'Hello ');//页面显示Hello wHello

4，replaceData()

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

<p>Hello world</p>
var pElementText = document.queryselector('p');
pElementText.firstchild.replaceData(7,5,'world' );//页面显示 Hello wworld

5，substringData()

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

<p>Hello world</p>
var pElementText = document.queryselector('p');
var sub_context = pElementText.firstchild.substringData(7,10);

6，remove()

        remove方法用于移除当前Text节点。移除之后不再在网页上显示。

<p>Hello world</p>
document.queryselector('p').firstchild.remove();
//现在 HTML代码为<p></p>