目录
一、项目概述
二、HTML结构设计
三、CSS样式设置
四、JavaScript功能实现
1. 调试与基础准备
2. 新建任务功能
3. 删除任务功能
4. 任务状态切换功能
五、完整代码整合
六、总结
一、项目概述
本文将带你一步步实现一个简单的任务清单（Todo List）应用，包含新建任务、标记完成、删除任务等核心功能。通过本案例，你将掌握DOM操作、事件绑定以及CSS布局的综合运用。
二、HTML结构设计
首先搭建基础的页面结构，分为导航栏（nav）和容器（container）两部分，容器包含未完成（todo）和已完成（done）两个区域。
<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进行页面美化，包括居中布局、按钮样式、颜色搭配等。
<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. 调试与基础准备
首先获取新建任务按钮并进行调试查看属性：
let new_job_button = document.querySelector('.nav button') console.dir(new_job_button) // 调试代码看属性2. 新建任务功能
实现newJob函数，处理输入验证、创建新任务元素并添加到未完成列表：
<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. 删除任务功能
为每个删除按钮绑定点击事件，实现任务项的移除：
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. 任务状态切换功能
通过复选框实现任务在"未完成"和"已完成"之间的移动：
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文件如下：
<!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操作有所帮助！
