22.任务清单应用开发实战：从HTML结构到JavaScript交互的完整实现

一、项目概述

二、HTML结构设计

三、CSS样式设置

四、JavaScript功能实现

[1. 调试与基础准备](#1. 调试与基础准备)

[2. 新建任务功能](#2. 新建任务功能)

[3. 删除任务功能](#3. 删除任务功能)

[4. 任务状态切换功能](#4. 任务状态切换功能)

五、完整代码整合

六、总结

一、项目概述

本文将带你一步步实现一个简单的任务清单（Todo List）应用，包含新建任务、标记完成、删除任务等核心功能。通过本案例，你将掌握DOM操作、事件绑定以及CSS布局的综合运用。

二、HTML结构设计

首先搭建基础的页面结构，分为导航栏（nav）和容器（container）两部分，容器包含未完成（todo）和已完成（done）两个区域。

html 复制代码

<body>
    <div class="nav">
        <input type="text"><button>新建任务</button>
    </div>
    <div class="container">
        <div class="todo">
            <h3>未完成</h3>
            <input type="checkbox" name="" id="">
            <span>吃饭</span><button>删除</button>
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>

三、CSS样式设置

使用CSS进行页面美化，包括居中布局、按钮样式、颜色搭配等。

html 复制代码

<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;
}
</style>

四、JavaScript功能实现

1. 调试与基础准备

首先获取新建任务按钮并进行调试查看属性：

html 复制代码

let new_job_button = document.querySelector('.nav button')
console.dir(new_job_button)
// 调试代码看属性

2. 新建任务功能

实现newJob函数，处理输入验证、创建新任务元素并添加到未完成列表：

html 复制代码

<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)
}
</script>

3. 删除任务功能

为每个删除按钮绑定点击事件，实现任务项的移除：

html 复制代码

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)
    }
}

4. 任务状态切换功能

通过复选框实现任务在"未完成"和"已完成"之间的移动：

html 复制代码

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)
    }
}

五、完整代码整合

将上述三部分整合，完整的HTML文件如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单</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;
        }
    </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>

    <script>
        // let new_job_button = document.querySelector('.nav button')
        // console.dir(new_job_button)
        // // 调试代码看属性

        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)
            
            let delete_buttons = document.querySelectorAll('.row button')
            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>
</body>
</html>

六、总结

通过本案例，我们实现了一个功能完整的任务清单应用。核心要点包括：

使用document.createElement动态创建DOM元素
通过appendChild将新元素插入到指定位置
利用parentNode和removeChild实现删除功能
通过checked属性判断复选框状态，实现任务状态的切换

希望本文对你理解前端DOM操作有所帮助！