DOM操作

 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>

DOM树结构关系

<!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>