昆明java培训
达内昆明广州春城路

18487146383

热门课程

常见操作节点方法

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

昆明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分布式数据库的未来》

昆明java培训班:为什么java工程师薪资这么高?

昆明java培训班:你所不知道的java秘密

昆明java培训班;如何认识Java Web技术

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货