手记

JavaScrip节点类型之Text节点与文档片段

基本概念

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)

浏览器截图:

*实际上只会将文档片段的所有子节点添加到相应位置上;文档片段本身永远不会成为文档树的一部分。


文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。

0人推荐
随时随地看视频
慕课网APP