javascript文档节点

  • 创建文本节点

    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>

 

转载于:https://www.cnblogs.com/sujianfeng/p/7693599.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值