6.节点的访问关系和操作

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <div class="box1">
10     <div class="box2" id="box2"></div>
11     <div class="box3"></div>
12 </div>
13 
14 <script>
15 
16     //节点的访问关系是以属性形式存在
17 
18     //1.box1是box的父节点
19 //    var box2 = document.getElementsByClassName("box2")[0];
20 //    var box2 = document.getElementById("box2")
21 //    console.log(box2.parentNode);
22 //
23 //    //2.nextElementSibling下一个兄弟节点
24 //    console.log(box2.nextElementSibling);
25 //
26 //    //firstElementChild第一个子节点
27 //    console.log(box2.parentNode.firstElementChild);
28 //
29 //    //所有子节点
30 //    console.log(box2.parentNode.childNodes);
31 //    console.log(box2.parentNode.children);
32 
33 
34 
35     //节点的操作
36     //1.创建
37     var aaa = document.createElement("li");
38     var bbb = document.createElement("afadsfadsf");
39     console.log(aaa);
40     console.log(bbb);
41 
42     //添加
43     var box1 = document.getElementsByClassName("box1")[0];
44     box1.appendChild(aaa);
45     box1.insertBefore(bbb,aaa);
46 
47     //删除
48     box1.removeChild(bbb);
49     aaa.parentNode.removeChild(aaa);//自杀，自己删除自己
50 
51     //克隆
52     var ccc = box1.cloneNode();
53     var ddd = box1.cloneNode(true);
54     console.log(ccc);
55     console.log(ddd);
56 
57 </script>
58 </body>
59 </html>