JS - WebAPI 基础

引言

JS 分成三大部分：

① ECMAScript：语法基础
② DOM API：操作页面结构
③ BOM API：操作浏览器

WebAPI

API：Application Programming Interface ( 应用程序接口 )

所谓的 API 本质上就是一些现成的函数 / 对象，让开发者直接拿来用，方便开发。
其相当于一个工具箱，只不过开发者用的工具箱数目繁多，功能复杂。

WebAPI 包含了 DOM + BOM.

DOM

DOM：Document Object Model ( 文档对象模型 )

DOM 树形结构，可以看见，DOM 树实际上就是一个 html 文件中的详细信息，本质上一个 DOM 树就是由一个 html 文件中的所有元素 (标签) 所构成的。

一些基础概念

① 文档：一个页面就是一个文档，使用 document 表示。
② 元素：页面中一个标签就可以称为一个元素，使用 element 表示。
③ 节点：网页中所有的内容都可以称为节点 ( 标签节点、注释节点、文本节点、属性节点等 ). 使用 node 表示。

由于在 JS 中，上面三个概念都是对应一个一个对象，所以 DOM 就称为文档对象模型。

一、获取元素

1. querySelector 函数

querySelector 函数可以通过 CSS 语法中的选择器，来获取到对应元素 (标签)。要想对元素进行后续操作，获取标签是一个大前提。
而这里接收 querySelector 函数返回的，其实是一个 JS 对象，后续可以使用该对象的 API 方法，对该元素 (标签) 的属性、内容、样式…进行直接修改。

这里的思想就和 MySQL数据库的思想一样，只有当你选中了某一个数据库，才能对其内部的表进行增删查改。而利用 use 就是大前提。
同样地，这里 querySelector 函数就是大前提。

展示

创建一个 elem 对象来接收 querySelector 函数所选取的元素 (标签)。

<body>
    <div class="parent">
        <div class="child1">123div>
        <div class="child2">456div>
        <div class="child3">789div>
    div>

	<script>
		//querySelector() 括号中填写 css 语法中的选择器
		let elem = document.querySelector('div');
		console.log(elem);
		console.log("-----------------");
		
		let elem2 = document.querySelector('.child2'); 
		console.log(elem2);
		console.log("-----------------");
		
		let elem3 = document.querySelector('.child5'); 
		console.log(elem3);
		console.log("-----------------");
	script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展示结果：

2. querySelectorAll 函数

querySelectorAll 函数可以用来选取全部具有某一类的元素 (标签)，和 querySelector 函数的用法相似。

<body>

    <div class="parent">
        <div class="child1">123div>
        <div class="child2">456div>
        <div class="child3">789div>
    div>

	<script>
		let elem4 = document.querySelectorAll('div');
		console.log(elem4);
		console.log("-----------------");

		let elem5 = document.querySelectorAll('.parent');
		console.log(elem5);
	script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：

querySelectorAll 函数严格地来说，返回的并不是一个数组，而是一个 NodeList，但 NodeList 的主要方法使用起来和数组无太大区别，此外，它本身也是一个对象，所以我们可以称它 “伪数组”。

展示结果：

二、理解事件的概念

JS 要构建动态页面，就需要感知到用户的行为。
用户对于页面的一些操作 ( 点击、选择、修改等操作 ) 都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。

也就是说，事件也是用户和程序之间沟通的桥梁，用户进行了某些操作也会产生一些 “事件” 从而让程序进行一些反应。比方说：鼠标点击、鼠标拖动、按下键盘、滑动屏幕…这些都可以被称为一个事件。

1. 事件的三要素

① 事件源：哪个元素触发的。
② 事件类型：是点击、选中、还是修改。
③ 事件处理程序：进一步如何处理，往往是一个回调函数。

2. 示例

<body>

    <input type="button" value="点击按钮">

    <script>
        let button = document.querySelector('input');
        //回调函数
        button.onclick = function () {
            alert("hello");
        }
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

展示结果：

button 是事件源 ( 用户操作了这个元素 )
click 就是事件的类型 ( 点击事件 )
通过 onclick 属性就能关联到一个具体的事件处理函数，当 button 触发了click事件，就会自动调用 onclick 对应的函数。此外，function 是一个回调函数，我们自己并没有调用这个函数，而是写好了，然后浏览器自动调用。

三、获取 / 修改元素内容

前面的 querySelector 函数可以对获取到某个元素 (标签)，接下来，看看对当前元素内部是怎么进行操作的吧。

1. innerHTML

展示 (1) 获取元素内容

通过 innerHTML ，可以获取到元素内部的内容 ( content )。
在下面程序中，可以获取到元素内部的所有文本内容。

<body>

    <div class="parent">hellodiv>

    <script>
        let parent = document.querySelector('.parent');
        console.log(parent.innerHTML);
    script>
    
body>
1
2
3
4
5
6
7
8
9
10

展示结果：

展示 (2) 修改元素内容

通过 innerHTML ，还可以对元素内部的内容进行修改。

<body>
    
    <div class="parent"> hello div>
    <button>点击按钮, 更改文本button>

    <script>
        let button = document.querySelector('button');
        button.onclick = function() {
            //获取 parent 元素
            let parent = document.querySelector('.parent');
            //修改 parent 元素
            parent.innerHTML = 'world';
        }
        
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

展示结果：

案例

创建一个 +1 按钮，一个 -1 按钮，一个显示框显示整数，通过两个按钮对整数进行增减。

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

    <style>
        .parent {
            width: 380px;
            height: 200px;
            background-color: gray;

            /* 整个标签居中 */
            margin-left: auto;
            margin-right: auto; 

            /* 整个标签进行圆角设置 */
            border-radius: 20px;   
        }
        .child {
            font-size: 70px;
            color: aquamarine;

            /* 文本居中 */
            text-align: center;
        }
        .button {
            width: 200px;
            height: 100px;
            background-color:gray;

            margin-left: auto;
            margin-right: auto;

            /* 弹性布局 */
            display: flex;
            justify-content: space-between;
            /* 标签垂直居中 */
            align-items: center;
        }
        .button1, .button2 {
            width: 80px;
            height: 40px;
            font-size: 25px;
            background-color:white;
            /* 标签进行圆角设置 */
            border-radius: 10px;   
            /* border: none; */
        }
        .button1:hover, .button2:hover {
            background-color:coral;
        }
    style>
    
head>

<body>
    
    <div class="parent">
        <div class="child"> 100 div>
        <div class="button">
            <button class="button1"> + button>
            <button class="button2"> - button>
        div>  
    div>
    
    <script>
        let button1 = document.querySelector('.button1');
        button1.onclick = function() {
            //1. 获取元素
            let b1 = document.querySelector('.child');
            //2. 取出的元素的内容为字符串类型
            let content = b1.innerHTML;
            //3. 将字符串类型转换成数字类型，再加 1 
            let result = parseInt(content) + 1;
            //4. 把结果再写回去
            b1.innerHTML = result;
        }

        let button2 = document.querySelector('.button2');
        button2.onclick = function() {
            let b2 = document.querySelector('.child');
            let content = b2.innerHTML;
            let result = parseInt(content) - 1;
            b2.innerHTML = result;
        }

    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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

展示结果：

四、获取 / 修改元素属性

1. 获取元素属性

<body>

    <img src="male.png" alt="男孩" title="这是男孩">

    <script>
        let img = document.querySelector('img');
        console.log(img);
        //dir 可以将当前元素的详细情况打印出来
        console.log(img.src);
        console.log(img.alt);
        console.log(img.title);
        console.dir(img);
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们以一个内容为图片的标签为例，观察 log 方法和 dir 方法的区别。dir 可以显示非常详细的信息，在下面的截图中，我并没有截完 img 元素中所有的属性。而 log 方法可以一个个的获取 img 的属性。

展示结果：

2. 修改元素属性

<body>

    <img src="male.png" alt="男孩" title="这是男孩">

    <script>
        let img = document.querySelector('img');
        img.onclick = function() {
            if(img.title == '这是男孩') {
                img.src = 'female.png';
                img.alt = '这是女孩';
                img.title = '这是女孩';
            } else {
                img.src = 'male.png';
                img.alt = '这是男孩';
                img.title = '这是男孩';
            }
        }
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们通过上面的程序，将 img 标签的属性进行修改，从而用鼠标点击，达到图片互换的效果。

此外，应注意：

在 JS 中，判断两个字符串的内容是否相等，直接通过 “==” 即可判断，而在 Java 中，是通过 equals 方法来进行判断的。然而，大部分的语言都是通过两个等号进行判断的，C / Java 是例外。

展示结果：

五、获取 / 修改表单元素属性

表单元素对应的属性，主要是指 input 标签的一些属性。常用的属性可以通过 DOM 来修改，如下：

value: 			input 的值
disabled: 		禁用
checked: 		选中复选框
selected: 		选中下拉框
type: 			input 的类型(文本, 密码, 按钮, 文件等)
1
2
3
4
5

展示1 播放与暂停按钮之间的切换

<body>

    <input type="button" value="播放">
   
    <script>
        let button = document.querySelector('input');
        button.onclick = function() {
            if(button.value == '播放') {
                button.value = '暂停';
            } else {
                button.value = '播放';
            }
        }
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

展示结果：

展示2 设计全选框功能

<body>
    <h3>请选择你想要的机器人h3>
    <input type="checkbox" class="child"> 卡布达 <br/>
    <input type="checkbox" class="child"> 金龟次郎 <br/>
    <input type="checkbox" class="child"> 车轮滚滚 <br/>
    <input type="checkbox" class="child"> 卡布达 <br/>
    <input type="checkbox" class="child"> 呱呱蛙 <br/>
    <input type="checkbox" class="all"> 全选 <br/>

    <script>
        let all = document.querySelector(".all");
        let childs = document.querySelectorAll(".child");
        
        all.onclick = function() {
            for(let i=0; i<childs.length; i++) {
                //将每个 child 属性设置选中功能
                childs[i].checked = all.checked; 
            }
        }

		//每个单选框也影响着全选框
        for(let i=0; i<childs.length; i++) {
            childs[i].onclick = function() {
                all.checked = checkChild();
            }
        }

        //如果当前某个选项未被选中，那么就取消选中全选框
        //如果所有选项都被选中，那么就选中全选框
        function checkChild() {
            for(let j=0; j<childs.length; j++) {
                    if(!childs[j].checked) {
                        return false;
                    }
                }
            return true;
        }
    script>
body>
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

展示结果：

六、修改样式属性

JS 不仅可以更改 html 的一些属性，还可以对 CSS 的设置样式进行修改。

展示1 行内样式修改

设计一个鼠标点击数字，不断调大的场景。

<body>

    <div style="font-size: 20px;">卡布达div>
    
    <script>
        let div = document.querySelector('div');

        div.onclick = function() {
            //div.style.fontSize 返回的是一个字符串，需要用 parseInt 转换成数字类型
            //parseInt 在转换过程中，若遇到了非数字的字符，就会立即转换结束
            let fontSize = parseInt(div.style.fontSize);
            fontSize = fontSize + 10;
            div.style.fontSize = fontSize + 'px'; //带上单位
        }
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

展示结果：

注意：

① 在 CSS 中，使用的命名法为 font - size，而在 JS 中应使用 fontSize，因为 JS 并不支持脊柱命名法。

② parseInt 函数，在转换过程中，若遇到了非数字的字符，就会立即转换结束。

③ 展示1 是针对 CSS 行内样式的操作，但此情况仅适用于修改较少的场景。

展示2 类名样式修改

设计一个能白天模式和夜间模式相互切换的场景。

<body>

    <div class="day">
        卡布达<br/>
        卡布达<br/>
        卡布达<br/>
        卡布达<br/>
        卡布达<br/>
    div>

    <style>
        .day {
            background-color: white;
            color: black;
        }

        .night {
            background-color: gray;
            color: white;
        }
    style>

    <script>
        let div = document.querySelector('div');
        div.onclick = function() {  
            
            //indexOf 方法的目的是用来查找子串是否存在，存在则返回下标，不存在则返回 -1
            if(div.className.indexOf('day') != -1) {
                div.className = 'night';
            } else {
                div.className = 'day';
            }

            console.log(div.className);
        }
    script>

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

展示结果：

七、操作节点

//1. 创建元素节点
let element = document.createElement();

//2. 插入节点到 DOM 树中

//parent 代表 节点 a, x, y 的父节点
parent.appendChild(a);//将节点a 插入到指定节点的最后一个孩子之后
parent.insertBefore(x, y)//将节点x 插入到节点y 之前
1
2
3
4
5
6
7
8

展示1

<body>

    <div class="parent">
        <div class="aaa">卡布达div>
        <div class="bbb">金龟次郎div>
        <div class="ccc">呱呱蛙div>
    div>

    <script>
        let div = document.createElement('div');
        div.id = 'myDiv';
        div.className = 'box';
        div.innerHTML = 'hello world';
    script>
    
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当我们创建好一个节点的时候，发现并没有显示在页面上。为什么？这是因为新创建的节点并没有加入到 DOM 树中。所以说，光创建一个节点，内存中确实是存在了，但对结果来说，并没有什么用。

展示结果：

展示2

<body>
    
    <div class="parent">
        <div class="aaa">卡布达div>
        <div class="bbb">金龟次郎div>
        <div class="ccc">呱呱蛙div>
    div>

    <script>
        let div = document.createElement('div');
        div.id = 'myDiv';
        div.className = 'box';
        div.innerHTML = 'hello world';

        let parent = document.querySelector('.parent');
        parent.appendChild(div);
    script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

展示结果：

展示3

<body>

    <div class="parent">
        <div class="aaa">卡布达div>
        <div class="bbb">金龟次郎div>
        <div class="ccc">呱呱蛙div>
    div>

    <script>
        let div = document.createElement('div');
        div.id = 'myDiv';
        div.className = 'box';
        div.innerHTML = 'hello world';

        let parent = document.querySelector('.parent');
        parent.appendChild(div);
        let ccc = document.querySelector('.ccc');
        //若对同一节点插入两次，则只有最后一次生效
        parent.insertBefore(div, ccc);
    script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

展示结果：

注意：

① 插入节点的时候，一般先使用 CSS 中的类选择器，再转换成对象，最后对该对象进行操作。

② 若对同一节点插入两次，则只有最后一次生效。这其实很好理解，不管插入多少次，就代表其移动了多少次，只有最后一次才是 “目的地”。

展示4 删除节点

//parent 代表 节点 a 的父节点
//oldchild 接收返回值，表示刚刚被删除的 a节点

oldChild = parent.removeChild(a);
1
2
3
4

注意：被删除节点只是从 DOM 树中，被移除了，但仍然在内存中。之后可通过 oldChild 随时加入到 DOM 树的其他位置，只有当程序结束后，或走出某个作用域，才会被垃圾回收。在这一点上，和 Java 很相似。

<body>

    <div class="parent">
        <div class="aaa">卡布达div>
        <div class="bbb">金龟次郎div>
        <div class="ccc">呱呱蛙div>
    div>

    <script>
        let parent = document.querySelector('.parent');
        let bbb = document.querySelector('.bbb');
        parent.removeChild(bbb);
    script>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

展示结果：

八、综合案例

1. 猜数字游戏

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>猜数字游戏title>
head>

<body>

    <button class="reset">重新开始一局游戏button><br/>

    请输入要猜的数字: <input type="text" class="number"> 

    <button class="guess">点击猜button><br/>

    已经猜的次数: <span class="count"> 0 span><br/>

    结果: <span class="result">  span>

    <script>

        //1. 拿到每个元素的对象
        let reset = document.querySelector('.reset');
        let number = document.querySelector('.number');
        let guess = document.querySelector('.guess');
        let count = document.querySelector('.count');
        let result = document.querySelector('.result');

        //2. 将猜的次数和生成的随机数放在点击事件的外面
        let guessCount = 0;
        let randomNum = Math.floor( Math.random() * 100 ) + 1;

        //3. 生成 guess 点击事件
        guess.onclick = function() {
            //(1) 猜的次数 +1
            guessCount += 1;
            count.innerHTML = guessCount;

            //(2) 将输入的猜的数字从输入框中拿出来，和随机数进行比较
            let guessNum = parseInt(number.value);

            if(guessNum == randomNum) {
                result.innerHTML = '猜对了';
                result.style.color = 'green';
            } else if (guessNum > randomNum) {
                result.innerHTML = '猜大了';
                result.style.color = 'red';
            } else {
                result.innerHTML = '猜小了';
                result.style.color = 'blue';
            }
        }

        //4. 设计好重置按钮的逻辑
        reset.onclick = function() {
            //这是一个 BOM API，相当于刷新浏览器的页面
            location.reload();
        }
    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

展示结果：

2. 表白墙

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>demo2title>
head>

<body>
    <div class="parent">
        <h2> 表白墙 h2>
        <p>输入后点击提交, 会将信息显示在表格中p>

        <div class="row">
            <span>谁: span>
            <input type="text">
        div>

        <div class="row">
            <span>对谁: span>
            <input type="text">
        div>

        <div class="row">
            <span>说什么: span>
            <input type="text">
        div>

        <button class="button"> 提交 button>
        <button class="clear"> 清空 button>

    div>

    

    <script>
        //1. 获取输入框中的内容
        let submit = document.querySelector('.button');

        submit.onclick = function() {
            let input = document.querySelectorAll('input');
            let from = input[0].value;
            let to = input[1].value;
            let message = input[2].value;
            //console.log(from + ',' + to + ',' + message);

            if(from == '' || to == '' || message == '') {
                return;
            }

            //2. 创建节点， 并把节点放入 DOM 树中
            let div = document.createElement('div');
            div.className = 'row';
            div.innerHTML = from + " 对 " + to + " 说: " + message;
            let parent = document.querySelector('.parent');
            parent.appendChild(div);

            //3. 一趟后，清空输入框
            for(let i=0; i<input.length; i++) {
                input[i].value = '';
            }

            //4. 点击清空，刷新页面
            let clear = document.querySelector('.clear');
            clear.onclick = function() {
                location.reload();
            }
        } 

    script>

    <style>
        .parent {
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            /* background-color: aquamarine; */
        }

        h2 {
            text-align: center;
            font-size: 30px;
            padding: 20px;
        }

        p {
            text-align: center;
            font-size: 14px;
            padding: 10px;
        }


        .row {
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: gray; */
            
        }

        span {
            width: 150px;
            font-size: 18px;
            /* text-align: center; */
            /* background-color: aquamarine; */
            
        }

        input {
            width:250px;
            height: 45px;
            border-radius: 5px;
            border-color: black;
            /* border: none; */
            /* background-color: aquamarine; */
        }

        .button, .clear {
            width: 400px;
            height: 37px;
            background-color: coral;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: aquamarine; */
        }
        
        .button:hover {
            background-color: blue;
        }

        .clear:hover {
            background-color: black;
        }
    style>
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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

展示结果：

3. 待办事项

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>待办事项title>
head>

<body>
    <div class="parent">

        <div class="child1">
            <input type="text">
            <button class="button1">新建任务button>
        div>

        <div class="bar">
            <span>未完成span>
            <span>已完成span>
        div>

        <div class="container">
            <div class="todo">
                <div class="row">
                    
                div>
            div>

            <div class="done">div>
        div>
    div>

    <script>

        //1. 实现新增待办事项
        
        //1.1 获取新建任务按钮的对象
        let button1 = document.querySelector('.button1');
        
        //1.2 将新建任务这个按钮设为一个点击事件
        button1.onclick = function() {
            //1. 获取输入文本框中的内容
            let content = document.querySelector('.child1>input');
            let inputContent = content.value;
            if(inputContent == '') {
                console.log('你还未输入内容');
                return;
            }

            //1.3 新增节点
            //(1) 创建一个节点
            //新创建的节点如果需要原有的属性，必须通过 className 赋值过去 
            let div = document.createElement('div');
            div.className = 'row';
            let input = document.createElement('input');
            input.type = 'checkbox';
            input.className = 'checkbox';
            let span = document.createElement('span');
            span.innerHTML = inputContent;
            span.className = 'items';
            let button = document.createElement('button');
            button.innerHTML = '删除';
            button.className = 'button2';

            //(2)把这个节点以及节点的子节点全部挂在 DOM 树上   
            //把三个元素放在 row 属性下
            div.appendChild(input);
            div.appendChild(span);
            div.appendChild(button);

            //将 row 属性放在 todo 属性下
            let todo = document.querySelector('.todo');
            todo.appendChild(div);

            //每成功新建一次任务，就将上一次的任务给清空了
            content.value = '';

             //2. 实现待办事项与完成事项之间的转换
             //2.1 针对 input 设为一个点击事件，实际上是实现多选框之间转换
            input.onclick = function() {
                if(input.checked) {
                    //如果多选框被选中了，那么就拿到 完成这一列
                    let target = document.querySelector('.done');
                    target.appendChild(div);
                } else {
                    //如果多选框未被选中，那么就拿到 未完成这一列
                    let target = document.querySelector('.todo');
                    target.appendChild(div);
                }
            }

            //3. 实现删除操作，针对删除按钮实现一个点击事件
            button.onclick = function() {
                //此时 div 的父元素可能是 todo，也可能是 done
                //可以直接通过 parentNode 这个属性来获取到元素当前的父元素
                let parent = div.parentNode;
                parent.removeChild(div);
            }


        }

    script>

    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .parent {
            width: 700px;
            margin-left: auto;
            margin-right: auto;
            /* background-color: red; */
        }

        .child1 {
            width: 700px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            /* background-color: gray; */
        }

        input {
            width: 580px;
            height: 40px;
            margin-right: 10px;
            /* background-color: gray; */
        }

        .button1 {
            width: 102px;
            height: 42px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 8px;

        }

        .bar {
            width:700px;
            height: 40px;
            line-height: 35px;
            font-weight: bold;
            margin-bottom: 20px;
            background-color:lightslategrey;
            color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .container {
            width: 700px;
            height: 800px;
            /* background-color: aquamarine; */
            margin-left: auto;
            margin-right: auto;
            /* 让 todo 和 done 这两个 div 放置在同一行 */
            display: flex;
            justify-content: center;
        }

        .todo {
            width: 350px;
            height: 800px;
            /* background-color: green; */
        }

        .checkbox {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .items {
            width: 260px;
            height:30px;
            line-height: 30px;
        }

        .done {
            width: 350px;
            height: 800px;
            /* background-color: blue; */
        }

        .row {
            width: 350px;;
            height:50px;
            /* line-height: 50px; */
            display: flex;
            align-items: center;
        }

    style>

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

展示结果：

相关阅读:
uniapp使用页面通讯$on、$emit进行数据传参，页面DOM不刷新问题
 【网络技术】计算机网络介绍
 【面试题精讲】如果一个类没有声明构造方法，该程序能正确执行吗?
使用 Docker 部署 WebTop 运行 Linux 系统
 数千 npm 账号使用域名过期的邮箱，涉及 8494 个包
 多目标差分进化算法（Matlab代码实现）
迅为RK3588在 Linux 系统中使用 NPU
删除有序数组中的重复项
 Redis网络模型
 # LeetCode第169题—多元数组
原文地址：https://blog.csdn.net/lfm1010123/article/details/126193394