Dom节点操作

基础JavaScript

Dom文档对象模型

4.8 节点操作

4.81 节点概述

image-20230301151209618 image-20230301151228115

4.82 父级节点

  • parentNode()

image-20230301151312269

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        // 1.父节点 parentNode
        var erweima = document.querySelector('.erweima')
        // 以前的获取节点方式
        // var box=document.querySelector('.box')

        // 现在的获取节点方式（父节点）
        // 得到的是离元素最近的父级节点（），如果找不到父节点就返回为空null
        console.log(erweima.parentNode);
    </script>
</body>

</html>

4.83 子级节点

  • children

image-20230301151343545

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // DOM提供的方法（API）获取
        var ul=document.querySelector('ul')
        // var lis=ul.querySelectorAll('li')

        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        var lis= ul.childNodes
        console.log(lis)
        // 元素节点 nodeType 为1
        // 属性节点 nodeType 为2
        // 文本节点 nodeType 为3（文本节点包括文字、空格、换行等）
        console.log(lis[0].nodeType)
        console.log(lis[1].nodeType)

        // 2、children 获取所有的子元素节点
        var list=ul.children
        console.log(list);
    </script>
</body>

</html>
  • 首尾节点

image-20230301151517362

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

</html>
  • 2.2 下拉菜单案例
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            margin: 50px
        }

        ul {
            list-style: none;
        }

        ul li {
            float: left;
            text-align: center;

        }

        ul li a {
            display: block;
            width: 100px;
            padding: 10px 0;
            text-decoration: none;
            color: black;
        }

        ul li ul {
            display: none;
        }

        ul li ul li {
            float: none;
            width: 100px;
            padding: 10px 0;
            border: 1px solid rgb(244, 99, 3);
            box-sizing: border-box;
        }

        ul li ul li:hover {
            background-color: rgb(244, 99, 3);
            color: white;
        }

        ul li a:hover {
            color: white;
            background-color: grey;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
    </ul>
    <script>
        var ul=document.querySelector('.nav')
        var list=ul.children
        for(var i=0;i<list.length;i++){
            list[i].onmouseover=function(){
                this.children[1].style.display='block'
            }
            list[i].onmouseout=function(){
                this.children[1].style.display='none'
            }
        }
    </script>
</body>

</html>

4.84 兄弟节点

image-20230301151814981

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);

        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

        // 都有兼容性问题
        // 解决办法
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }
    </script>
</body>

</html>

4.85 创建节点

image-20230301151855573

4.86 添加节点

image-20230301152003412

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>

</html>
  • 定时对话框
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		dialog=document.createElement("div")
		dialog.style.width="500px"
		dialog.style.height="300px"
		dialog.style.backgroundColor="brown"
		dialog.style.position="fixed"
		dialog.style.left="50%"
		dialog.style.top="50%"
		dialog.style.transform="translate(-50%,-50%)"
		
		
		//title
		head=document.createElement("div")
		head.style.lineHeight="50px"
		head.style.backgroundColor="green"
		head.style.textAlign="center"
		head.style.color="white"
		head.style.fontSize="50px"
		head.innerHTML="head"
		
		//content
		content=document.createElement("div")
		content.style.lineHeight="200px"
		content.style.backgroundColor="black"
		content.style.textAlign="center"
		content.style.color="white"
		content.style.fontSize="50px"
		content.innerHTML="content"
		
		//cancle
		cancle=document.createElement("button")
		cancle.style.width="100px"
		cancle.style.lineHeight="40px"
		cancle.style.color="black"
		cancle.innerHTML="cancle"
		
		//sure
		sure=document.createElement("button")
		sure.style.width="100px"
		sure.style.lineHeight="40px"
		sure.style.color="black"
		sure.style.right="0px"
		sure.style.position="absolute"
		sure.innerHTML="sure"
		
		
		dialog.appendChild(head)
		dialog.appendChild(content)
		dialog.appendChild(cancle)
		dialog.appendChild(sure)
		document.body.appendChild(dialog)
	</script>
	<script type="text/javascript">
		//3秒后消失
		setTimeout(function(){
			dialog.style.display="none"
		},3000)
		//3秒后显示
		setTimeout(function(){
			dialog.style.display="block"
		},6000)
		
		//双击消失
		sure.ondblclick=function(){
			dialog.style.display="none"
		}
	</script>
</html>
  • 留言发布
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

4.87 删除节点

image-20230301153124299

  • 删除留言案例
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
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
            padding-right: 5px;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li')

                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);

                // (3) 删除元素 删除的是当前链接的li 它的父亲
                var dele = document.querySelectorAll('a')
                for (var i = 0; i < dele.length; i++) {
                    dele[i].onclick = function () {
                        // 删除的是 li 当前a所在的li this.parentNode;
                        ul.removeChild(this.parentNode)
                    }
                }
            }
        }
    </script>
</body>

</html>

4.88（创加删）动态生成表格案例

image-20230301153328387

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 200px auto;
        }

        table thead th,
        td {
            width: 150px;
            line-height: 40px;
            border: 1px solid rgb(0, 0, 0);
            background-color: rgb(197, 195, 195);
            font-size: 20px;
            text-align: center;
        }

        table tbody tr td {
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <th>name</th>
            <th>subject</th>
            <th>score</th>
            <th>do</th>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    // 1、准备学生数据
    var datas = [
        {
            name: 'qq',
            subject: 'math',
            score: 100
        },
        {
            name: 'ww',
            subject: 'chinese',
            score: 80
        },
        {
            name: 'ee',
            subject: 'pe',
            score: 170
        },
        {
            name: 'rr',
            subject: 'english',
            score: 90
        },
    ]

    // 2、往tbody里面创建行，有几个人就创建几行（通过数组长度来做）
    var tbody = document.querySelector('tbody')
    for (var i = 0; i < datas.length; i++) {
        // 1、创建tr行
        var tr = document.createElement('tr')
        tbody.appendChild(tr)
        // 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
        // 使用for in遍历学生对象
        for (var k in datas[i]) { //里面的for循环管列td
            // 创建单元格
            var td = document.createElement('td')
            tr.appendChild(td)
            // 把对象里的属性值给td
            td.innerHTML = datas[i][k]  //k是属性名，datas[k]得到属性值
        }

        // 3、创建有删除的单元格
        var td = document.createElement('td')
        td.innerHTML = "<a href='javascript:;'>删除</a>"
        tr.appendChild(td)
    }

    // 4、删除按钮生效
    var btn = document.querySelectorAll('a')
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
</script>

</html>

4.89 克隆节点

image-20230301153418730

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
        // ul.insertBefore(lili, ul.children[0])

    </script>
</body>

</html>

4.90 创建元素的三种方式

  • 代码解释
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="creat"></div>
    <script>
        // 三种创建元素方式区别

        // 1、document.write()
        var btn = document.querySelector("button")
        btn.onclick = function () {
            // document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
            document.write("<div>123</div>")
        }
        // window.onload = function () {
        //     document.write("<div>123</div>")
        // }

        // 2、innerHtml()
        var inner = document.querySelector('.inner')
        // for (var i = 0; i < 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');

        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

        // 区别
        // 1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
        // 2.innerHTM血是将内容写入某个DoM节点，不会导致页面全部重绘
        // 3.innerHTM血创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
        // 4.createElement()创建多个元素效率稍低一点点，但是结构更清晰
        // 总结：不同浏览器下，innerHTM血效率要比creatElement高
    </script>
</body>

</html>
  • 拼接效率测试
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
//innerHTML拼接测试
<script>
    function fn() {
        var d1 = +new Date();

        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

//innerHTML数组测试
<script>
    function fn() {
        var d1 = +new Date();

        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

//creatElement效率测试
<script>
    function fn() {
        var d1 = +new Date();

        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

//time:
//innerHTML数组测试 < //creatElement效率测试 < //innerHTML拼接测试
//优先选择innerHTML数组测试

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~