基本概念
Text类型包含的是可以照字面解释的纯文本内容,不能包含HTML代码。
Text节点的基本属性
nodeType的值为3;
nodeName的值为"#text";
nodeValue的值为节点所包含的文本;
parentNode是一个Element;
*Text类型没有子节点。
Text节点的常用属性
data:可以通过nodeValue属性或data属性访问或修改Text节点中包含的文本,这两个属性中包含的值相同。
length:该属性是只读属性,保存着节点中字符的数目。
例子:
<p>hello</p>
var p = document.getElementsByTagName("p")[0]
console.log(p.childNodes[0].nodeValue); //输出:hello
console.log(p.firstChild.data); //输出:hello
console.log(p.firstChild.length); //输出:5
//也可以直接修改文本内容
p.childNodes[0].data = "world";
Text节点的常用方法
document.createTextNode():创建新文本节点,这个方法接受一个参数:要插入节点中的文本。
例子:
var p=document.createElement("p")
var textNode=document.createTextNode("hello")
p.appendChild(textNode)
document.body.appendChild(p)
浏览器截图:
normalize():将所有文本节点合并成一个节点。
例子:
var p = document.createElement("p")
var textNode1 = document.createTextNode("hello")
var textNode2 = document.createTextNode(" world")
p.appendChild(textNode1);
p.appendChild(textNode2);
document.body.appendChild(p);
console.log(p.childNodes.length); //输出:2
console.log(p.firstChild.data); //输出:hello
p.normalize();
console.log(p.childNodes.length); //输出:1
console.log(p.firstChild.data); //输出:hello world
splitText(): 这个方法会将一个文本节点按照指定的位置分割成两个文本节点。
例子:
var p = document.createElement("p")
var textNode = document.createTextNode("hello world")
p.appendChild(textNode)
document.body.appendChild(p)
console.log(p.childNodes.length); //输出:1
console.log(p.firstChild.nodeValue); //输出:hello world
console.log(p.firstChild.splitText(5).nodeValue); //输出:world
console.log(p.childNodes.length); //输出:2
console.log(p.firstChild.nodeValue); //输出:hello
DocumentFragment节点(文档片段)
DocumentFragment节点在文档中没有对应的标记,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。
使用document.createDocumentFragment()方法创建文档片段。
使用appendChild()或insertBefore()将文档片段中的内容一次性地添加到文档中。
例子:
var fragment=document.createDocumentFragment()
var ul=document.createElement("ul")
var li=null
for (var i=0;i<3;i++){
li=document.createElement("li")
li.appendChild(document.createTextNode("Item " + (i+1)))
fragment.appendChild(li)
}
ul.appendChild(fragment)
document.body.appendChild(ul)
浏览器截图:
*实际上只会将文档片段的所有子节点添加到相应位置上;文档片段本身永远不会成为文档树的一部分。
文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。