1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM树结构关系</title> 6 </head> 7 <body> 8 <div class="sup"> 9 <div class="sub1"></div> 10 <div class="sub2"></div> 11 <div class="sub3"></div> 12 </div> 13 </body> 14 <script type="text/javascript"> 15 var body = document.querySelector(‘body‘); 16 console.log(body); 17 </script> 18 19 <script> 20 var sub2 = document.querySelector(‘.sub2‘); 21 // 父级标签 22 console.log("sub2父标签:", sub2.parentElement); 23 // 上一个标签 24 console.log("sub2上兄弟标签:", sub2.previousElementSibling); 25 // 下一个标签 26 console.log("sub2下兄弟标签:", sub2.nextElementSibling); 27 28 var sup = document.querySelector(‘.sup‘); 29 // 所有子标签 30 console.log("sup子标签们:", sup.children); 31 // 第一个子标签 32 console.log("sup第一个子标签:", sup.firstElementChild); 33 // 最后一个子标签 34 console.log("sup最后一个子标签:", sup.lastElementChild); 35 </script> 36 37 </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>DOM操作</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; } .p { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box">box box box bi box</div> <button class="b1">添加到box中</button> <button class="b2">添加到body中</button> <button class="b3">插到body下box之前</button> <button class="b4">将body下box替换为p</button> <button class="b5">删除box</button> </body> <script type="text/javascript"> var body = document.querySelector(‘body‘); var box = document.querySelector(‘.box‘); var b1 = document.querySelector(‘.b1‘); var b2 = document.querySelector(‘.b2‘); var b3 = document.querySelector(‘.b3‘); var b4 = document.querySelector(‘.b4‘); var b5 = document.querySelector(‘.b5‘); // 创建标签p var p = document.createElement(‘p‘); console.log(p); // 设置标签样式 p.className = ‘p‘; // 添加到指定区域 b1.onclick = function () { var res = box.appendChild(p); console.log(res); // 自身 } b2.onclick = function () { body.appendChild(p); } // 总结: // 1.创建标签只能由document来调用执行 // 2.一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置 // 插入到指定区域 b3.onclick = function () { // 将p插到box之前(前者插入到后者之前) var res = body.insertBefore(p, box); console.log(res); // 自身 // box和p都是body的一级子标签后,顺序有需求决定 // body.insertBefore(box, p); } b4.onclick = function () { // 将p替换掉box(前者替换后者) var res = body.replaceChild(p, box); console.log(res); // box } b5.onclick = function () { // 由父级删除指定子级 // var res = body.removeChild(box); // 获取父级来删除自身 var res = box.parentElement.removeChild(box); console.log(res); // box setTimeout(function () { // 删除后,标签对象依然可以被js保存,继而可以重新添加到页面 body.appendChild(res); }, 1000) } </script> </html>
原文：https://www.cnblogs.com/xuqidong/p/12115817.html
