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>