课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 常见操作节点方法
  • 常见操作节点方法

    发布:昆明Java培训      来源:达内新闻      时间:2016-08-31

  • 昆明Java培训班的老今天给大家讲常见操作节点方法

    1、查找方法:

    document.getElementById('');

    document.getElementsByTagName('');

    2、复制节点:

    cloneNode(boolean) :复制一个节点

    true:深复制,复制节点及其整个子节点树

    false :浅复制,只复制节点本身。

    注意:cloneNode()方法不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序等。

    深复制与浅复制对比:

    1 <body>

    2 <div id="box1">

    3    <h1>深复制与浅复制</h1>

    4    <p>深复制,复制节点及其整个子节点树,浅复制,只复制节点本身</p>

    5 </div>

    6 <script>

    7    var box1=document.getElementById('box1');

    8    var box2=box1.cloneNode(true);//深复制

    9    var box22=box1.cloneNode(false);//浅复制

    10    document.body.appendChild(box2);

    11    document.body.appendChild(box22);

    12    //将节点复制到body底部,甚至是js代码下面

    13 </script>

    14 </body>

    3、操作节点:

    createElement("标签名") :创建新元素

    createTextNode("") :创建文本节点

    创建方法:document.createElement('div');

    appendChild(node) :末尾插入一个节点node

    insertBefore(node,targetNode) : target之前插入节点node

    replaceChild(newNode,oldNode) : new替换节点old

    removeChild(node) :移除父节点的某个子节点

    1 <body>

    2 <ul id="list">

    3    <li>11</li>

    4    <li>22</li>

    5    <li>33</li>

    6 </ul>

    7 <button id="btn">删除</button>

    8 <script>

    9    var list=document.getElementById('list');

    10    var btn=document.getElementById('btn');

    11    var lis=list.children;

    12 /*createElement("标签名") :创建新元素*/

    13    var newLi1=document.createElement('li');//start、创建元素

    14    var newLi2=document.createElement('li');//start、创建元素

    15 /*把文本节点插入新建节点中--方法一*/

    16    //2、创建文本节点

    17    var txtnode=document.createTextNode('我是createTextNode创建的11');

    18    newLi1.appendChild(txtnode);//3、newLi末尾插入一个文本节点txtnode

    19    list.appendChild(newLi1);//end、list末尾插入一个节点newLi

    20 /*把文本节点插入新建节点中--方法二*/

    21    newLi2.innerHTML='我是innerHTML创建的22';//2、newLi文本中写入文本

    22    list.appendChild(newLi2);//end、list末尾插入一个节点newLi

    23

    24

    25 /*insertBefore(node,targetNode) : target之前插入节点node*/

    26    list.insertBefore(newLi1,lis[2]);

    27 /*replaceChild(newNode,oldNode) : new替换节点old*/

    28    list.replaceChild(newLi2,lis[1]);

    29 /*removeChild(node) :移除父节点的某个子节点*/

    30    btn.onclick=function (){

    31        list.removeChild(lis[1]);

    32    }

    33 </script>

    34 </body>

    了解详情请登陆昆明达内Java培训官网(km.Java.tedu.cn)!

    推荐文章

上一篇:节点关系

下一篇:属性常见操作方法

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56