图中箭头所指的地方在DOM中就是text节点对象。下面将要了解:1,JavaScript中使用firstchild准确的找到需要修改的text节点(很明显一颗dom tree中不止一个text节点) ;2,使用JavaScript增加,删除,修改选定的text的内容。
目录
一,总览
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>