js-操作节点

警告
本文最后更新于 2020-09-28 20:39,文中内容可能已过时。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="parent">
        <div class="son"></div>
    </div>
    <span>brother</span>
    <ul>
        <li>aaa</li>
    </ul>
    <button>删除第一个li节点</button>
    <script>
        // 元素节点  nodeType为1
        // 属性节点  nodeType为2
        // 文本节点  nodeType为3
        var par = document.querySelector(".parent");
        ///////////////////////////////获取子节点和元素//////////////////////////////
        //获取所有子节点
        console.log("所有子节点:",par.childNodes); // div有三个子节点,分别是"换行符"、"div .son"、"换行符"
        // 获取第一个和最后一个子节点
        console.log("第一个子节点:",par.firstChild);
        console.log("最后一个子节点:",par.lastChild);


        // 获取所有子元素
        console.log("所有子元素:",par.children);
        // 获取第一个和最后一个子元素
        console.log("第一个子元素:",par.firstElementChild);
        console.log("最后一个子元素:",par.lastElementChild);
        
        //////////////////////////////获取兄弟节点和元素////////////////////////////// 
        //获取上一个和下一个兄弟节点
        console.log("下一个兄弟节点:",par.nextSibling);
        console.log("上一个兄弟节点:",par.previousSibling);
        //获取上一个和下一个兄弟元素
        console.log("下一个兄弟元素:",par.nextElementSibling);  // 下一个兄弟节点是span
        console.log("上一个兄弟元素:",par.previousElementSibling); // 上一个兄弟节点是null

        //////////////////////////////获取父弟节点和元素////////////////////////////// 
        console.log("父节点:",par.parentNode);
        console.log("父元素:",par.parentElement);


        //////////////////////////////创建元素节点////////////////////////////// 
        // 父元素中追加一个新的元素
        // 先获取父级标签
        var ul = document.querySelector("ul")
        // 创建一个新的元素
        var li = document.createElement("li")
        // 填写内容和追加
        li.innerHTML="我是追加的"
        ul.appendChild(li)
        
        // 在某个元素的前面插入
        //获取在谁前面插入
        // var aaa = document.querySelector("ul>li")
        var aaa = ul.children[0]
        // 创建一个新的元素
        var li2 = document.createElement("li")
        // 填写内容和追加
        li2.innerHTML = "我是插入的"
        ul.insertBefore(li2,aaa)

        //////////////////////////////删除节点////////////////////////////// 
        var btn = document.querySelector("button")
        btn.onclick = function(){
            if (ul.children[1] === undefined){
                this.disabled=true
            }
            ul.removeChild(ul.children[0])
        }
    </script>
</body>
</html>
请我喝杯水
SoulChild 微信号 微信号
SoulChild 微信打赏 微信打赏
0%