文本节点由Text类型表示:包含的是可照字面解释的纯文本内容。纯文本可以包含转义的HTML字符,但不包含HTML代码
nodeType 3
nodeName #text
nodeValue 节点所包含的文本
parentElement 是一个Element
不支持子节点
nodeValue属性和data属性访问Text节点包含文本,nodevalue的修改也可以反映到Data上来
appendData(text); //添加到文本节点的末尾
deleteData(offset,count) //从offset指定位置,删除count个字符
insertData(offset,text) 从offset指定位置插入text
replaceData(offset,count,text) 用text替换从offset位置开始的count个字符
splitText(offset) 从offset指定位置将文本节点分为两个文本节点
substringData(offset,count) 提取从offset位置开始的count个字符
实例:
var oP = document.getElementsByTagName('p')[0]; console.log(oP.childNodes[0].__proto__); //--------------------------------------- oP.childNodes[0].appendData(',你是认真的吗?');//在文本节点后边添加文本 console.log(oP.childNodes[0].nodeValue); //--------------------------------------- oP.childNodes[0].deleteData(0,2);//文本节点删除字符0开始位置2删除个数 console.log(oP.childNodes[0].nodeValue); //--------------------------------------- oP.childNodes[0].insertData(0,'减肥');//文本节点插入字符,0开始位置 console.log(oP.childNodes[0].nodeValue); //--------------------------------------- oP.childNodes[0].replaceData(4,4,'xxxx');//文本节点替换4开始位置第二个4替换个数 console.log(oP.childNodes[0].nodeValue); //--------------------------------------- console.log(oP.childNodes);//[text, span] oP.childNodes[0].splitText(4);//从4位置断开变为两个文本节点 console.log(oP.childNodes);//[text, text, span] //console.log(oP.childNodes[0]); //console.log(oP.childNodes[1]); //console.log(oP.childNodes[2]); //--------------------------------------- /* 重新合并在一起 */ oP.childNodes[0].appendData(oP.childNodes[1].nodeValue); oP.replaceChild(oP.childNodes[2],oP.childNodes[1]); //oP.removeChild( oP.childNodes[2] ); console.log( oP.childNodes ); console.log( oP.childNodes[2] ); console.log( Object.prototype.toString.call(oP.childNodes));//childNodes并不是数组
firstChild属性指第一个节点
1、创建文本节点
document.createTextNode(‘插入节点中的文本’)创建新的文本节点
创建文本节点的同时,也会为其设置ownerDocument属性,
生成节点必须添加到文档书中,否则不会显示在浏览器中
document.createElement('标签');//创建一个新的元素
<body> <script> var d1 = document.createElement('div'); d1.className = 'div1'; var t1 = document.createTextNode('减肥就到可丽可心!'); d1.appendChild(t1); var t2 = document.createTextNode('舒舒服服减肥!'); d1.appendChild(t2); document.body.appendChild(d1); </script> </body>
2、规范化文本节点
如果在一个父级元素中相邻有好几个文本节点,可以用
父级元素.normalize() 归一化:把文本节点合并为一个文本节点内容也合并
浏览器在解析文档的时候,永远不会创建两个相邻的文本节点,只有进行Dom操作的时候可以。
3、分割文本节点
splitText()方法和normalize()方法相反,上篇文章已经说过;从指定的位置截开,并返回一个新的文本节点;