【JavaScript】WebAPI入门到实战

骑猪看日落 2024-04-27 07:39 7阅读 0赞

#### 文章目录 ####

*  一、WebAPI背景知识
 *   *  1. 什么是WebAPI？
     *  2. 什么是API？
 *  二、DOM基本概念
 *  三、获取元素
 *  三、事件初识
 *   *  1. 点击事件
     *  2. 键盘事件
 *  四、操作元素
 *   *  1. 获取/修改元素内容
     *  2. 获取/修改元素属性
     *  3. 获取/修改表单元素属性
     *  4. 获取/修改样式属性
 *  五、操作节点
 *   *  1. 新增节点
     *  2. 删除节点
 *  六、实战案例
 *   *  1. 猜数字
     *  2. 表白墙
     *  3. 任务清单

--------------------

## 一、WebAPI背景知识 ##

### 1. 什么是WebAPI？ ###

前面学习的 JS 分成三个大的部分：

>  *  `ECMAScript`: 基础语法部分
>  *  `DOM API`: 操作页面结构
>  *  `BOM API`: 操作浏览器

`WebAPI` 就包含了 `DOM` \+ `BOM`，这个是 `W3C` 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).

前面学的 JS 基础语法主要学的是 ECMAScript，这让我们建立基本的编程思维. 相当于练武需要先扎马步，但是真正来写一个更加复杂的有交互式的页面，还需要 WebAPI 的支持，相当于各种招式。下面我们重点讲解的是DOM API。

--------------------

### 2. 什么是API？ ###

API 是一个更广义的概念，而 WebAPI 是一个更具体的概念，特指 `DOM` \+ `BOM`，所谓的 API 本质上就是一些现成的`函数/对象`，让程序猿拿来就用，方便开发。

> 相当于一个工具箱，只不过程序猿用的工具箱数目繁多，功能复杂

![在这里插入图片描述][f8162ed37b4b406eb2b8879f5da262af.png]

💕 **API参考文档**

[https://developer.mozilla.org/zh-CN/docs/Web/API][https_developer.mozilla.org_zh-CN_docs_Web_API]

--------------------

## 二、DOM基本概念 ##

💕 **什么是DOM？**

DOM 全称为 `Document Object Model`

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

>  *  网页内容
>  *  网页结构
>  *  网页样式

💕 **DOM树**

一个页面的结构是一个树形结构, 称为 DOM 树。

树形结构在数据结构阶段我们已经学过了，可以简单理解成类似于 “家谱” 这种结构，页面结构形如：

![在这里插入图片描述][126098bbcd384d408a3708f262f1df0e.png]

DOM 树结构形如：

![在这里插入图片描述][f98e36e6f46743b5917f9173ab1a7f01.png]

**`重要概念:`**

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

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 “`文档对象模型`”。

--------------------

## 三、获取元素 ##

这部分工作类似于 `CSS 选择器` 的功能

💕 **querySelector**

> 这个是 HTML5 新增的, IE9 及以上版本才能使用

前面的几种方式获取元素的时候都比较麻烦，而使用 `querySelector` 能够完全复用前面学过的 CSS 选择器知识，达到更快捷更精准的方式获取到元素对象。

var element = document.querySelector(selectors);

*  `selectors` 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX\_ERR 异常
 *  表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 `Element`对象.
 *  如果您需要与指定选择器匹配的所有元素的列表，则应该使用 `querySelectorAll()`
 *  可以在任何元素上调用，不仅仅是 `document`。 调用这个方法的元素将作为本次查找的根元素

正因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器：

![在这里插入图片描述][82f2547500d341bca461ddce3c5b7663.png]  
![在这里插入图片描述][2f23f0ce4c054712b4ce98ab0c9d17aa.png]

使用document会选择到整个页面。

![在这里插入图片描述][2e9a828b36f14b8583c54c550eec9f13.png]

💕 **querySelectorAll**

console.log(document.querySelectorAll('div'))

![在这里插入图片描述][cb7a69096bc9464e8966411b5468d87e.png]

--------------------

## 三、事件初识 ##

`事件`是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。

💕 **基本概念**

JS 要构建动态页面, 就需要感知到用户的行为。

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作。

> 浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略。

💕 **事件三要素**

1.  事件源: 哪个元素触发的
2.  事件类型: 是点击, 选中, 还是修改?
3.  事件处理程序: 进一步如何处理. 往往是一个回调函数

--------------------

### 1. 点击事件 ###

下面我们来看一个简单的点击事件：

![在这里插入图片描述][6fceefc9045747b58adb5135ceb24195.png]

--------------------

### 2. 键盘事件 ###

*  `onkeydown` 事件：当用户按下键盘上的`任何键`时触发，包括字符键、功能键和控制键。
 *  `onkeypress` 事件：当用户按下`字符键`（例如字母、数字、符号键）时触发。
 *  `onkeyup`事件：当用户释放键盘上的键时触发，无论是字符键、功能键还是控制键。

--------------------

💕 **`onkeydown` 事件**

**示例一：**

<input type="text">
    <script>
        // 事件源
        let input = document.querySelector('input')
        input.onkeydown = function() {
          
            console.log("键盘正在按下")
        }
    </script>

当我们按键盘的过程中会有如下效果：

![在这里插入图片描述][b4a3a7c002ee41b6b67b4272bfc2627d.png]

`event`—> 事件处理程序通常会接收一个事件对象（通常命名为 `event` 或 `e`），该对象包含与触发事件相关的信息和属性。事件对象提供了有关事件的详细信息，使开发人员能够对事件进行更精细的控制和响应。

`String.fromCharCode()` 是 JavaScript 中的一个方法，用于将一个或多个字符编码的 Unicode 值转换为相应的字符串。这个方法可以接受一个或多个 Unicode 值作为参数，并返回由这些 Unicode 值构成的字符串。

**示例二：**

<input type="text">
    <script>
        let input = document.querySelector('input')
        input.onkeydown = function(event) {
          
            let a = event.keyCode
            let b = String.fromCharCode(a)
            console.log(b)
        }
    </script>

![在这里插入图片描述][05787ed4c2324d7dbece033141f81e09.png]

--------------------

💕 **`onkeypress` 事件**

当我们使用`onkeydown`事件时，发现无论按下的字母是大写还是小写，他输出在控制台上时都是大写。使用onkeypress可以有效解决这个问题。

![在这里插入图片描述][5fcad792ffae46288e33abe21763d50c.png]

<input type="text">
    <script>
        let input = document.querySelector('input')
        input.onkeypress = function(event) {
          
            let a = event.keyCode
            let b = String.fromCharCode(a)
            console.log(b)
        }
    </script>

![在这里插入图片描述][87efaae08604471d9b77eeb5b4c0506d.png]

--------------------

💕 **`onkeyup` 事件**

`onkeyup` 事件是在键盘按下去弹起来的时候才会触发的事件。

<input type="text" onkeyup="myOnkeyUp()">
    <script>
        let input = document.querySelector('input')
        input.onkeypress = function(event) {
          
            let a = event.keyCode
            let b = String.fromCharCode(a)
            console.log(b)
        }
        function myOnkeyUp() {
          
            console.log("按键被抬起")
        }
    </script>

![在这里插入图片描述][356bf8df54a04cbd95c284975e3dc562.png]

但是有时候我们输入的是特殊键的时候，将不会打印在控制台上，比如说：`shift`键、`alt`键等。

![在这里插入图片描述][19898973ab4742c8b0c60b4b9ce7a528.png]

可以看到控制台并没有打印。那是因为这些键需要特殊处理：

![在这里插入图片描述][6ed6d9eef35d42919be505132a576533.png]

例如：

<input type="text" onkeyup="myOnkeyUp()">
    <script>
        let input = document.querySelector('input')
        input.onkeydown = function(event) {
          
            // 如果按键按下的是shift此时弹出一个弹窗，提示shift被按下
            if(event.shiftKey) {
          
                alert("shift键被按下")
            }
            if(event.altKey) {
          
                alert("alt键被按下")
            }
        }
        function myOnkeyUp() {
          
            console.log("按键被抬起")
        }
    </script>

![在这里插入图片描述][f400920084fc4e71ae8349cc70b0091b.png]

--------------------

## 四、操作元素 ##

### 1. 获取/修改元素内容 ###

💕 **innerText**

`Element.innerText` 属性表示一个节点及其后代的“`渲染`”文本内容

![在这里插入图片描述][90362f2175be4a6d92d08d4db0aa04ba.png]

<body>
        <div>
            <span>hello world</span>
            <span>hello world</span>
        </div>
    </body>
    <script>
        var div = document.querySelector('div')
        // 读取 div 内部内容
        console.log(div.innerText)
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</span>'
    </script>

![在这里插入图片描述][618148643357486ca2c98aced193fd8b.png]

💕 **innerHTML**

`Element.innerHTML` 属性设置或获取HTML语法表示的元素的后代

![在这里插入图片描述][2d1e038716c348f5b06c87094a6dd46d.png]

<body>
        <span>这是一个span标签</span>
    </body>
    <script>
        // 获取元素内容
        let span = document.querySelector('span')
        console.log(span.innerHTML)
        // 修改
        span.innerHTML = "我在修改元素内容"
        // 修改页面结构
        span.innerHTML = "<h3>这是h3标签</h3>"
    </script>

![在这里插入图片描述][eb83f52250d6494d8068214a6bd68e56.png]

--------------------

### 2. 获取/修改元素属性 ###

可以通过 `Element` 对象的属性来直接修改, 就能影响到页面显示效果。

![在这里插入图片描述][742b0ba2d363471b92c8baf0b2ccb197.png]

<body>
        <img src="../百度logo图标.png" alt="图片加载失败" title="这是一个提示图片" width="100px" height="100px">
    </body>
    <script>
        let img = document.querySelector('img')
        console.dir(img)
        img.title = "这是已经修改完毕的title"
        img.onclick = function() {
          
            alert("你已经点击了这个图片")
        }
    </script>

![在这里插入图片描述][5da631adc51144c5b9e1ada6009d5689.png]  
![在这里插入图片描述][bdf5f0632ba7439c9504942a0b40f1c6.png]

--------------------

### 3. 获取/修改表单元素属性 ###

**`表单`** (主要是指 input 标签)的以下属性都可以通过 `DOM` 来修改：

*  value: input 的值.
 *  disabled: 禁用
 *  checked: 复选框会使用
 *  selected: 下拉框会使用
 *  type: input 的类型(文本, 密码, 按钮, 文件等)

💕 **实现播放按钮**

<body>
        <input class="btn" type="button" value="播放" onclick="Onclick()">
    </body>
    <script>
        let btn = document.querySelector('.btn')
        // 当按钮的 value 变成 播放时, 此时将value按钮变成暂停。否则的话变成播放
        function Onclick() {
          
            if(btn.value == '播放')
                btn.value = '暂停'
            else
                btn.value = '播放'
        }
    </script>

![在这里插入图片描述][5afd73ed418a4b43bde57bd9c4532695.png]

--------------------

💕 **计数器实现：点击计数**

> 使用一个输入框输入初始值(整数). 每次点击按钮, 值 + 1或者 值 -1

<body>
        <input class="input" type="text" value="0">
        <input class="Add" type="button" value="+1" onclick="Add()">
        <input class="Min" type="button" value="-1" onclick="Min()">
    </body>
    <script>
        function Add() {
          
            let input_element = document.querySelector('.input')
            input_element.value = parseInt(input_element.value) + 1
        }
        function Min() {
          
            let input_element = document.querySelector('.input')
            input_element.value = parseInt(input_element.value) - 1
        }
    </script>

![在这里插入图片描述][7e920c6d7ed04c0c81694fb8766a53a8.gif_pic_center]

--------------------

💕 **复选框的选中效果**

代码示例：全选/取消全选按钮

![在这里插入图片描述][7676b1769b54471b8f76099073d35468.png]

> 1.  点击全选按钮，则选中所有选项
> 2.  只要某个选项取消，则自动取消全选按钮的勾选状态

<body>
        <input class="all" type="checkbox" onclick="SelectAll()">选中全部<br>
        <input class="select" type="checkbox">貂蝉<br>
        <input class="select" type="checkbox">小乔<br>
        <input class="select" type="checkbox">安琪拉<br>
        <input class="select" type="checkbox">妲己<br>
    </body>
    <script>
        let all = document.querySelector('.all')
        let select = document.querySelectorAll('.select')
        // 当选中 “全部选中” 按钮时, 其他所有选项都将被选中
        function SelectAll() {
          
            for(i = 0; i < select.length; i++){
          
                select[i].checked = all.checked
            }
        }
        // 当其他选项中有任意一个选项没有被选中时, “全部选中”选项也不被勾选
        for(i = 0; i < select.length; i++){
          
            select[i].onclick = function() {
          
                all.checked = IsSelectAll(select)
            }
        }
        function IsSelectAll(select) {
          
            for(i = 0; i < select.length; i++){
          
                if(select[i].checked == false)
                    return false
            }
            return true
        }
    </script>

![在这里插入图片描述][185eee921fcb4853b979a5438be5db6a.gif_pic_center]

--------------------

### 4. 获取/修改样式属性 ###

💕 **行内样式操作**

“行内样式”, 通过 style 直接在标签上指定的样式。优先级很高，适用于改的样式少的情况。

![在这里插入图片描述][4b5b123d0e2342a084e89984cf73abd1.png]

**`示例：`** 点击文字则放大字体

<body>
        <div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
    </body>
    <script>
        function changeSize() {
          
            let element = document.querySelector('div')
            console.log(element.style)
            let size = parseInt(element.style.fontSize) + 10
            // element.style.cssText = "font-size:" + size + "px"
            element.style.fontSize = size + "px"
        }
    </script>

![在这里插入图片描述][4990854dae66425f8fa6e91464b8cfd5.gif_pic_center]

--------------------

💕 **类名样式操作**

修改元素的 CSS 类名，适用于要修改的样式很多的情况，由于 class 是 JS 的保留字, 所以名字叫做 `className`

![在这里插入图片描述][77075134f14c424084c2d9539fe54dcd.png]

**`示例：`** 开启夜间模式

![在这里插入图片描述][172b45567db946c99bf760a409a9536e.png]

>  *  点击页面切换到夜间模式(背景变成黑色)
>  *  再次点击恢复日间模式(背景变成白色)

代码实现：

![在这里插入图片描述][e697858e78b54129979b4dbff8d289d0.gif_pic_center]

--------------------

## 五、操作节点 ##

💕 **什么是节点？**

"**`节点`**"通常指的是文档对象模型（`DOM`）中的元素或对象。DOM是表示HTML和XML文档的树状结构，它将文档中的每个部分（如元素、属性、文本等）表示为对象，开发者可以使用JavaScript来访问、操作和修改这些对象，从而实现对文档的动态交互和修改。

![在这里插入图片描述][9b1ba7252ed44f379bd47903a8cf2334.png]

### 1. 新增节点 ###

分成两个步骤：

> 1.  创建元素节点
> 2.  把元素节点插入到 dom 树中

💕 **创建元素节点**

使用 `createElement` 方法来创建一个元素，`options` 参数暂不关注。

![在这里插入图片描述][28eb5895d35846fd932c152663742b9f.png]

这是元素节点的创建方式，当然我们还可以创建别的：

>  *  `createTextNode` 创建文本节点
>  *  `createComment` 创建注释节点
>  *  `createAttribute` 创建属性节点

虽然创建出新的 div 了, 但是我们新创建的节点并没有加入到DOM 树中。

--------------------

💕 **插入节点到 dom 树中**

1.  使用 `appendChild` 将节点插入到指定节点的最后一个孩子之后  
    ![在这里插入图片描述][7c8e319c6fcc489f93eeaf007707fd1a.png]

例如：

<div>
            <p class="p1">这是一个p标签1</p>
            <p class="p2">这是一个p标签2</p>
            <p class="p3">这是一个p标签3</p>
        </div>

![在这里插入图片描述][23dc00e1c6ed480797dcf0088e132024.png]

插入到指定节点的最后一个孩子之后：

![在这里插入图片描述][2f80b2cd68c949c1be133527bff20cb1.png]

1.  使用 insertBefore 将节点插入到指定节点之前

![在这里插入图片描述][2368aece085c4ec488a270b5c2a1aaab.png]

>  *  `insertedNode` 被插入节点(newNode)
>  *  `parentNode` 新插入节点的父节点
>  *  `newNode` 用于插入的节点
>  *  `newNode`将要插在`referenceNode`这个节点之前

注意：

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾，referenceNode 引用节点不是可选参数。

例如：

<div>
        <p class="p1">这是一个p标签1</p>
        <p class="p2">这是一个p标签2</p>
        <p class="p3">这是一个p标签3</p>
    </div>

![在这里插入图片描述][b157d14368524f69b7ed1f6c403efe42.png]

![在这里插入图片描述][fffb962105a54ea0b4ba4993f95f9a33.png]

如果我们将`insertBefore`中的第一个参数referenceNode设置为空时，新增的元素会被插在子节点的末尾。

div.insertBefore(new_node, null)

![在这里插入图片描述][987d528ed81549b385e1bb0530626b0b.png]

注意：

>  *  如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)
>  *  一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容

--------------------

### 2. 删除节点 ###

使用 `removeChild` 删除子节点

![在这里插入图片描述][6fb855e137054dd288e437680eeab1ab.png]

>  *  child 为待删除节点
>  *  element 为 child 的父节点
>  *  返回值为该被删除节点
>  *  被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位  
>     置.
>  *  如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常

![在这里插入图片描述][09e49aaf3060425e99e1f3f15350b3be.png]

删掉上面的p2标签：

![在这里插入图片描述][bbeae7397f174c08b60fa4ec6dd6237e.png]

--------------------

## 六、实战案例 ##

### 1. 猜数字 ###

💕 **预期效果：**

![在这里插入图片描述][1316aa59bf3d4e2cae007449417cc6ee.png]

💕 **代码实现：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .false {
          
                color: red;
            }
            .true {
          
                color: green;
            }
        </style>
    </head>
    <body>
        <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
        请输入要猜的数字: <input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>
        已经猜的次数: <span class="has_guess_num">0</span><br>
        结果: <span class="result"></span>
    </body>
    <script>
        // 输入的数字
        let to_guess_num_element = document.querySelector('.to_guess_num')
        console.dir(to_guess_num_element)
        // 已经猜的次数
        let has_guess_num_element = document.querySelector('.has_guess_num')
        console.dir(has_guess_num_element)
        // 猜测的结果
        let result_element = document.querySelector('.result')
        console.dir(result_element)
    
        function reSet() {
          
            to_guess_num_element.value = 0
            has_guess_num_element.innerHTML = 0
            result_element.innerHTML = ""
        }
        // 生成随机数作为我们要猜的数字
        let num = Math.floor(Math.random()*100) + 1
        console.log(num)
    
        function Guess() {
          
            has_guess_num_element.innerHTML = parseInt(has_guess_num_element.innerHTML) + 1
            if(parseInt(to_guess_num_element.value) < num){
          
                result_element.innerHTML = "猜小了"
                result_element.className = false
            } else if(parseInt(to_guess_num_element.value) > num) {
          
                result_element.innerHTML = "猜大了"
                result_element.className = false
            } else {
          
                result_element.innerHTML = "猜中了"
                result_element.className = true
            }
        }
    </script>
    </html>

![在这里插入图片描述][67f586aae2104a5fb206bb9a1fecc94f.gif_pic_center]

--------------------

### 2. 表白墙 ###

💕 **预期效果：**

![在这里插入图片描述][ce0e1de17ad849dbac143fc20597cc4f.png]

💕 **代码实现：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
          
                margin: 0px;
                padding: 0px;
            }
            .container {
          
                width: 400px;
                margin: 0 auto;
            }
            h1 {
          
                text-align: center;
                margin-bottom: 40px;
                margin-top: 20px;
            }
            p {
          
                text-align: center;
                color: gray;
                line-height: 63px;
            }
            .div1 {
          
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .divContent {
          
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                color: pink;
            }
            .edit {
          
                margin-bottom: 20px;
                width: 200px;
                height: 30px;
            }
            span {
          
                width: 50px;
                margin-bottom: 20px;
            }
            .submit {
          
                background-color: rgb(255, 157, 0);
                color: white;
                width: 260px;
                height: 30px;
                border: none;
                border-radius: 5px;
            }
            .submit:active{
          
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>表白墙</h1>
            <p>输入相关信息, 点击提交数据将会展示在表格中</p>
            <div class="div1">
                <span>谁: </span><input type="text" class="edit">
            </div>
            <div class="div1">
                <span>对谁: </span><input type="text" class="edit">
            </div>
            <div class="div1">
                <span>说: </span><input type="text" class="edit">
            </div>
            <div class="div1">
                <input type="button" value="提交" class="submit" onclick="Submit()">
            </div>
        </div>
    </body>
    <script>
        function Submit() {
          
            let edits = document.querySelectorAll('.edit')
            console.dir(edits)
            let from = edits[0].value
            let to = edits[1].value
            let message = edits[2].value
            if(from == '' || to == '' || message == '')
                return
            console.log(from + " " + to + " " + message)
            let div = document.createElement('div')
            div.className = "divContent"
            div.innerHTML = from + "对" + to + "说: " + message
            console.log(div)
            let container = document.querySelector('.container')
            container.appendChild(div)
        }
    </script>
    </html>

![在这里插入图片描述][9bda25ea7bfc4693ad5227327abb7613.gif_pic_center]

--------------------

### 3. 任务清单 ###

💕 **预期效果：**

![在这里插入图片描述][06ea5466a54049a4b411b0125a593194.png]

💕 **代码实现：**

<!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: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            .nav {
          
                width: 800px;
                height: 100px;
                margin: 0 auto;
                display: flex;
                align-items: center;
            }
            .nav input {
          
                width: 600px;
                height: 60px;
                border-radius: 5px;
            }
            .nav button {
          
                width: 200px;
                height: 60px;
                background-color: orange;
                color: white;
                font-size: 20px;
                border: orange;
                border-radius: 5px;
            }
            .nav button:active {
          
                background-color: grey;
            }
            .container {
          
                width: 800px;
                display: flex;
                margin: 0px auto;
            }
            h3 {
          
                background-color: gray;
                color: white;
                text-align: center;
                width: 400px;
                height: 60px;
                padding-top: 15px;
            }
            .todo,
            .done {
          
                width: 50%;
                height: 100%;
            }
            .row {
          
                width: 400px;
                display: flex;
                align-items: center;
            }
            span {
          
                width: 200px;
                font-size: 20px;
                margin-left: 5px;
            }
            .row button {
          
                width: 90px;
                height: 40px;
                font-size: 20px;
                margin-top: 10px;
            }
            /* s */
        </style>
    </head>
    <body>
        <div class="nav">
            <input type="text"><button onclick="newJob()">新建任务</button>
        </div>
        <div class="container">
            <div class="todo">
                <h3>未完成</h3>
                <div class="row">
                    <input type="checkbox" name="" id="">
                    <span>吃饭</span><button>删除</button>
                </div>
            </div>
            <div class="done">
                <h3>已完成</h3>
            </div>
        </div>
    </body>
    <script>
        function newJob() {
          
            // 获取到input输入框按钮
            let input = document.querySelector('.nav input')
            // 获取到输入的信息
            let input_info = input.value
            if(input_info == '') {
          
                return
            }
            console.log(input_info)
            // 获取到todo这个div
            let todo = document.querySelector('.todo')
            // 创建一个div
            let div = document.createElement('div')
            // 创建一个checkbox
            let checkbox = document.createElement('input')
            checkbox.type = 'checkbox'
            // 创建一个span（文本内容是刚才输入的信息对应的文本）
            let span = document.createElement('span')
            span.innerHTML = input_info
            console.log(checkbox)
            console.log(span)
            // 创建一个删除button
            let button = document.createElement('button')
            button.innerHTML = "删除"
            div.appendChild(checkbox)
            div.appendChild(span)
            div.appendChild(button)
            console.log(div)
            // 更新样式
            div.className = 'row'
            // // 将div插入到todo这个div中
            todo.appendChild(div)
    
            let delete_buttons = document.querySelectorAll('.row button')
            console.log(delete_buttons)
            for(i = 0; i < delete_buttons.length; i++) {
          
                delete_buttons[i].onclick = function() {
          
                    let parent = this.parentNode;
                    console.log(parent)
                    let grand_parent = parent.parentNode
                    console.log(grand_parent)
                    grand_parent.removeChild(parent)
    
                }
            }
            let checkbox_buttons = document.querySelectorAll('.row input')
            // 给每一个复选框绑定点击事件
            for(i = 0; i < checkbox_buttons.length; i++) {
          
                checkbox_buttons[i].onclick = function() {
          
                    // 将节点插入到对应的div中
                    // row代表的插入的节点
                    let row = this.parentNode;
                    // target代表的是将row插入到那个div中
                    // 如果复选框已经被选中，那么target就是已完成对应的这个div
                    // 否则target就是未完成对应的div
                    let target;
                    console.log(this.checked)
                    if(this.checked) {
          
                        target = document.querySelector('.done') 
                    } else {
          
                        target = document.querySelector('.todo')
                    }
                    target.appendChild(row)
                }
            }
    
    }
    </script>
    </html>

![在这里插入图片描述][6f9b609526294ac5b2aae73543c4c327.gif_pic_center]

--------------------

[f8162ed37b4b406eb2b8879f5da262af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c796fedcb8004d5ba4dc8d57a20e1373.png
[https_developer.mozilla.org_zh-CN_docs_Web_API]: https://developer.mozilla.org/zh-CN/docs/Web/API
[126098bbcd384d408a3708f262f1df0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/16c368955119400f8eb793078c2c1440.png
[f98e36e6f46743b5917f9173ab1a7f01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5fbf0aa86af943c896a7da47c1f8b484.png
[82f2547500d341bca461ddce3c5b7663.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a5a4a32813b843c09df224df41397b71.png
[2f23f0ce4c054712b4ce98ab0c9d17aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/570241cabcd94e81b87887b1eeea1252.png
[2e9a828b36f14b8583c54c550eec9f13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2878da9510e14987a0d494e1ae262b3f.png
[cb7a69096bc9464e8966411b5468d87e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/42e65027795c41d086f77ff47297552a.png
[6fceefc9045747b58adb5135ceb24195.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/94fd50b28b1a461f8464cb3ec7e08cdd.png
[b4a3a7c002ee41b6b67b4272bfc2627d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9c5386170ef042c68f8bb70c8745ed15.png
[05787ed4c2324d7dbece033141f81e09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8432f88e7ac5474991947c17c489d490.png
[5fcad792ffae46288e33abe21763d50c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/33814f9035d94a708e277d4a93f22e88.png
[87efaae08604471d9b77eeb5b4c0506d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5531821851b5442492beaebd123f0129.png
[356bf8df54a04cbd95c284975e3dc562.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8627215bfd244b78a6bdf71ccbed3a16.png
[19898973ab4742c8b0c60b4b9ce7a528.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bf05943ebda6471a90c21060061d07e6.png
[6ed6d9eef35d42919be505132a576533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a49ded25e90c419385fd38b550ac0a6a.png
[f400920084fc4e71ae8349cc70b0091b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3a72dc89e288475699dac1ad07e51a64.png
[90362f2175be4a6d92d08d4db0aa04ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bf6ee440f3e24490bccd6134ae2ded42.png
[618148643357486ca2c98aced193fd8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1e5cfc6fb69c441ca0f0fbc4b09f66ae.png
[2d1e038716c348f5b06c87094a6dd46d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c2bbffd307e74524bbcec537ca2aecf6.png
[eb83f52250d6494d8068214a6bd68e56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3d400a489a90468ea516fd7738a43497.png
[742b0ba2d363471b92c8baf0b2ccb197.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7e5d334d45564d41a53b4565c46f7cdf.png
[5da631adc51144c5b9e1ada6009d5689.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7d1258ef16c74faeb3707d64fdf21097.png
[bdf5f0632ba7439c9504942a0b40f1c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ee3b438f51a44c8c8459e4aab1ce5687.png
[5afd73ed418a4b43bde57bd9c4532695.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/695d8e47d29846e3aa6738cb52104827.png
[7e920c6d7ed04c0c81694fb8766a53a8.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/23e1d0568ffb4d5b94956097ca49b718.gif
[7676b1769b54471b8f76099073d35468.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/0ef72ff3eb394b2380305520aaf66225.png
[185eee921fcb4853b979a5438be5db6a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/59e9f1aee2364bcf8975ffaf7b038887.gif
[4b5b123d0e2342a084e89984cf73abd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1b1a8f898a474a9ea862cd89d636362c.png
[4990854dae66425f8fa6e91464b8cfd5.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ca2e0b3071484c17b507c568df789fc5.gif
[77075134f14c424084c2d9539fe54dcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3c697a33614e44a782200314cfd8f7a4.png
[172b45567db946c99bf760a409a9536e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9c71b19439e946018def5fa950afbf02.png
[e697858e78b54129979b4dbff8d289d0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/457d80c777ec45dfac8b9b431c4d03a0.gif
[9b1ba7252ed44f379bd47903a8cf2334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/83381369409e41de8ce01c3a1dfdb3d6.png
[28eb5895d35846fd932c152663742b9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ec1c3b25e5ed4696bca3edb2c8daedc2.png
[7c8e319c6fcc489f93eeaf007707fd1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/23379350c546415791710c12da227cf4.png
[23dc00e1c6ed480797dcf0088e132024.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/73509c6cad754fcd8c8a2d23d7daa763.png
[2f80b2cd68c949c1be133527bff20cb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8bcf607b43e346718f1c5602c4c59f48.png
[2368aece085c4ec488a270b5c2a1aaab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a9170ab95c8d44b68d93b0162e5cd909.png
[b157d14368524f69b7ed1f6c403efe42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c58555cc9fe04d869b3e15a2a8817301.png
[fffb962105a54ea0b4ba4993f95f9a33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a9030247ddc24cc59c13139dfb5f35c9.png
[987d528ed81549b385e1bb0530626b0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/d8d7616fe8e7498e86d0ff09bca4fded.png
[6fb855e137054dd288e437680eeab1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a7671b4fc1a3492686fd41fa3bddd750.png
[09e49aaf3060425e99e1f3f15350b3be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/cee7eafcc2564e419dd010d0e2173e75.png
[bbeae7397f174c08b60fa4ec6dd6237e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/21c06899efe94ffabfca07889d6988e1.png
[1316aa59bf3d4e2cae007449417cc6ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/be3fc6d0a6274da0a1e9d98016f9b1f9.png
[67f586aae2104a5fb206bb9a1fecc94f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2a67f0cb8f044f3a89986445da0fda8d.gif
[ce0e1de17ad849dbac143fc20597cc4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8206f13ee2614826a977e98944c99b96.png
[9bda25ea7bfc4693ad5227327abb7613.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7e0370066e4043ea84fccb56fd4f6952.gif
[06ea5466a54049a4b411b0125a593194.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/aac8e13ec6ac4ff08cee3343e9a0fe15.png
[6f9b609526294ac5b2aae73543c4c327.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/f9e1c17f83184eeb90b47dad856dc6f9.gif