简易待办清单通过原生dom操作实现：1.用createelement动态创建li、input[type=checkbox]、span和delete按钮；2.监听add-btn点击添加任务，trim后追加到ul；3.为checkbox绑定change事件控制span删除线；4.为delete-btn绑定click事件调用closest('li').remove()。
用 JavaScript 的 DOM 操作实现一个简易待办事项清单，核心是动态创建、更新和删除元素，配合表单交互与事件监听。不需要框架，纯原生即可完成，重点在于理解 document.createElement、appendChild、addEventListener 和元素属性控制（如 checked、textContent）。
1. 搭建基础 HTML 结构
只需一个输入框、一个添加按钮，以及一个用于渲染列表的容器（比如 <ul></ul>）：
<input type="text" id="todo-input" placeholder="输入新任务"><button id="add-btn">添加</button>
2. 添加新任务：获取输入 + 创建 DOM 元素
监听按钮点击，读取输入值，清空输入框，然后动态生成带复选框和文本的列表项：
- 用
document.getElementById获取输入框和按钮 - 调用
trim()去除首尾空格，避免空任务 - 对每个任务创建
<li>，内部包含：<input type="checkbox">+<span></span>显示文字 - 把
<li>追加到#todo-list中
3. 标记完成/取消完成：监听 checkbox 变化
为每个新创建的复选框绑定 change 事件，根据勾选状态给对应 <span></span> 添加或移除删除线样式：
- 通过
event.target获取被点击的 checkbox - 用
closest('li')找到父级<li>，再用querySelector('span')定位文字节点 - 设置
span.style.textDecoration = checked ? 'line-through' : 'none'
4. 删除任务：为每个列表项添加删除按钮
在每个 <li> 里末尾插入一个「×」按钮，并绑定点击事件移除整个 <li>：
- 创建
<button class="delete-btn">×</button>，设type="button"防止表单提交 - 按钮点击时调用
event.target.closest('li').remove() - 建议加简单样式（如
float: right; background: #f00; color: white;）提升可操作性
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
