javascript文档节点

2018-06-24 00:35:26来源：未知阅读 ()

创建文本节点

　　　　document.createTextNode() 创建新文本节点，该方法接收一个参数，即要插入节点中的文本信息。

 1 <script>
 2 //创建一个div节点
 3     var  element = document.createElement('div');
 4 //创建一个文本节点
 5     var textNode = document.createTextNode("hello");
 6 //将文本节点添加到div节点中
 7     element.appendChild(textNode);
 8 //将div节点添加到文档中
 9     document.body.appendChild(element);   
10 </script>

文本节点的合并

　　　　当往一个节点中添加多个文本节点后，要取出该节点的全部节点内容，第一个想到的方法是用for循环拼接。

1 var p2=document.getElementById('p2');
 2 var node1 = document.createTextNode('al!');
 3 p2.appendChild(node1);//添加一个文本节点
 4 var node2 = document.createTextNode('a2!');
 5 p2.appendChild(node2);//又添加一个文本节点        
 6 var len = p2.childNodes.length;
 7 var str ="";
 8 //for循环，拼接所有文本节点
 9 for(var i=0;i<len;i++){
10      str += p2.childNodes[i].nodeValue;
11 }
12 alert(str);

　　　　Node类型里定义了一个normalize() 方法，会将一个节点中的所有文本节点合并成一个文本节点。

 1 <script>
 2       var p2=document.getElementById('p2');
 3       var node1 = document.createTextNode('al!');
 4       p2.appendChild(node1);
 5       var node2 = document.createTextNode('a2!');
 6       p2.appendChild(node2);
 7       var num = p2.childNodes.length;
 8     p2.normalize();  //使用文本节点合并方法
 9       alert(p2.childNodes[0].nodeValue);//合并后只有一个节点，直接输出即可
10 </script>

文本节点的拆分

　　　　splitText() 方法，接收一个参数，即要拆分的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var p1 = document.getElementById('p1');
        var newNode = p1.childNodes[0].splitText(5);
                   //newNode的值为abcde
        alert(p1.childNodes.length);//2个文本节点
        var p2 = document.getElementById('p2');
        p2.appendChild(newNode);
                   //该方法会把拆分的前一部分(这里为’abcde‘)当做一个文本节点返回。
    }
    </script>
</head>
<body>
    <div>
     <p id='p1'>abcdefghijk</p>
     <p id='p2'></p>
    </div>
</body>
</html>

DocumentFragment 类型

　　　　文档片段，可以想象成一个背包，把多个节点先放进包里，然后一下子拿出来。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var fragment = document.createDocumentFragment();
 9         var time = new Date;
10         var old = time.getTime();
11         var ul = document.getElementById('ul1');
12         for(var i=0;i<5;i++){
13             var li = document.createElement('li');               
                li.appendChild(document.createTextNode('item'+i));
14 
15                         //这样写的话就是有一个li，就往ul里添加一个
16                         //ul.appendChild(li);  
17 
18             //这样写就是先把li 存在文档片段中，循环结束，再加到ul中
19             fragment.appendChild(li);
20         }
21         ul.appendChild(fragment);  //背包里（代码片段）的li一下子加入到ul中  好处是避免浏览器反复渲染新信息
22     }
23 
24     </script>
25 </head>
26 <body>
27     <ul id = 'ul1'></ul>
28 </body>
29 </html>