技术小天使很多人学JavaScript基础的时候，知识点一个接一个能背出来，但真到了要自己动手做一个小功能的时候，又不知道从哪儿下手。这其实是“输入”和“输出”之间的鸿沟——你听懂了某个语法，不代表你会用它来解决一个具体问题。我写这个系列，就是打算用一个个小而完整的前端JS案例，把变量、函数、DOM操作、事件监听这些东西串起来。今天是系列的第二篇，我们做一个几乎没有UI负担、但知识点密度很高的TODO列表应用。
这个案例适合这几类人：刚学完JS基础语法、想在真实场景里练手的新手；准备前端面试、需要快速过一遍DOM操作和事件机制的人；以及觉得自己“看得懂代码但写不出功能”的零基础转行者。整个项目纯前端实现，不需要脚手架，不需要打包工具，一个HTML文件加一个JS文件就能跑起来，把注意力完全集中在JavaScript本身。你把它做完，再回头看那些八股文式的面试题，会发现理解完全不一样。
1. 项目整体设计与思路拆解
1.1 为什么选“TODO应用”作为基础案例
很多教程喜欢用“点击按钮弹窗”“鼠标悬停变色”这种小例子来讲解DOM操作。这种例子不是没用，而是太碎，每个例子只覆盖一个知识点，学完以后你依然不知道该在什么时候用哪个API。TODO列表不一样，它是完整的功能闭环：有输入、有渲染、有交互、有状态变化，还有数据的增删改查。
我选这个案例，核心考虑就三条。第一，它天然需要一个数据结构来存放任务（数组），这就能把数组方法、对象属性、遍历操作全部带出来。第二，它必须依赖DOM操作才能把数据渲染到页面上，createElement、appendChild、textContent这些高频API全部要过一遍。第三，它需要事件监听来驱动交互，而且涉及“按钮点击”和“回车提交”两种触发方式，事件对象、事件绑定的细节就藏在这些交互里。
另外，TODO应用有天然的扩展空间。做完基础版本之后，你还可以加本地存储（localStorage）、加筛选按钮（全部/未完成/已完成）、加编辑功能。这意味着这个案例不是一次性的，随着你JS水平提升，可以反复回来给这个项目加东西，每次都有新收获——这是很多“一次性小例子”给不了的。
1.2 技术方案选择的背后逻辑
这个案例我刻意没有引入任何框架，也没有用构建工具，而是选了一个原生JavaScript方案，甚至不拆HTML和JS文件。可能有朋友觉得，现在前端都用Vue、React了，谁还手写原生JS？但我的观点很直接：框架解决的是复杂应用的状态管理和组件复用问题，而不是帮你学会JavaScript本身。如果你原生JS不够扎实，一上来就学框架，你写的代码大概率是“框架语法+一知半解的JS”，出了问题根本不知道是框架层的问题还是语言层的问题。
原生方案还有一个实际好处：调试链路最短。浏览器打开HTML文件就能跑，不用启动开发服务器，不用配置打包器，console一开就干活。对于基础学习来说，消消乐式的环境搭建才是最劝退的。而且，面试时很多题目考的就是原生JS的理解，这些眼力是要靠一次次写原生代码练出来的。
我在设计这个项目时特意做了分层：数据层（tasks数组）和视图层（渲染函数renderTasks）分离。这其实是在用最简单的形式演示一个非常重要的工程思想——不要让数据和界面乱成一锅粥。以后你接触任何前端框架，核心思路也都是这一条：数据变了，界面跟着变。能在小项目里有这个意识，后面学框架会轻松非常多。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心API与关键技术点详解
2.1 获取元素的几种方式
DOM操作的第一步永远是“拿到元素”。这个案例里我用到了两种获取方式：getElementById和querySelector。很多新手会疑惑，这两个到底什么区别？简单说，getElementById只认id，返回的是一个元素对象；querySelector接受任何CSS选择器，返回的是匹配的第一个元素。
javascript复制const inputBox = document.getElementById('task-input');
const addButton = document.querySelector('#add-btn');
const taskList = document.querySelector('#task-list');
实操中我更推荐在需要精确定位单个元素时优先用getElementById，因为它语义清晰、性能稍好。querySelector的优势在于灵活，比如选中某个元素下的第一个子元素，用querySelector('.item')一下就能做到。两种方式都要熟练，因为看别人的代码时经常两种混着用。
还有一个高频考点需要特别注意：getElementsByClassName返回的是HTMLCollection（实时集合），而querySelectorAll返回的是NodeList（静态集合）。这俩在很多面试题里被拿来对比，核心区别在于前者是“活的”，DOM变化会自动反映到集合里，后者不会。这个案例里我会刻意不用getElementsByClassName，就是希望大家先把querySelectorAll的NodeList记住，后面进阶再去理解“实时集合”的特殊性。
2.2 createElement动态创建节点
拿到元素之后，下一步是往页面上添加内容。很多人第一反应是改innerHTML，用字符串拼出一段HTML再塞进去。这个方法快是快，但有几个隐患：一是字符串拼接容易漏引号、漏标签闭合，写起来很痛苦；二是如果插入的内容包含用户输入，用字符串拼HTML容易出XSS安全问题；三是每次赋值innerHTML都会让浏览器重新解析整个子节点，频繁操作时性能不好。
所以这个案例我选择用createElement系列API来构建节点。这套API的逻辑很直观：先创建出元素，再设置它的内容和属性，最后把它挂到DOM树上。
javascript复制const taskItem = document.createElement('li');
taskItem.className = 'task-item';
taskItem.textContent = taskContent;
taskList.appendChild(taskItem);
这里有个细节值得重点说：textContent和innerHTML的区别。textContent是纯文本赋值，传入的字符串里有<script>也不会被当作HTML解析，所以用它来插入用户输入的内容最安全。而innerHTML会解析字符串里的HTML标签，美观但危险。日常开发的原则是：只要是用户输入的内容，一律用textContent，绝不用innerHTML直接拼接。
appendChild还有一个特点：它会把元素追加到父元素的末尾。所以做TODO列表时，新任务自然就出现在列表底部。如果你想让新任务出现在顶部（像某些聊天软件那样），就要用insertBefore(newNode, parent.firstChild)，这也是一个面试里经常被问到的API。这个案例我会用追加到末尾的方案，保持直觉逻辑。
2.3 事件监听与事件对象
前端交互的引擎是事件。这个案例里需要绑定两类事件：点击新增按钮、在输入框里按回车。点击事件最简单，直接addEventListener绑定就行。回车事件需要理解键盘事件。
javascript复制addButton.addEventListener('click', addTask);
inputBox.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
addTask();
}
});
event.key是用来判断具体按下哪个键的。注意，我用的是keydown而不是keypress，因为keypress在浏览器兼容性和非字符键处理上都有历史遗留问题，ECMAScript规范也对它不太友好。keydown时代各种浏览器表现比较一致，推荐优先使用。
事件监听还有一个非常重要的考点：事件委托。TODO列表里的删除按钮，如果给每一个按钮都单独绑定一个click事件，在动态增删节点的场景下会遇到各种麻烦——新创建的节点如果忘绑事件，点击就没反应。事件委托的思路是：把监听器绑在父元素上，利用事件冒泡，让父元素统一处理子元素触发的事件。子元素的事件对象里有个target属性，可以拿到真正被点击的那个元素。
javascript复制taskList.addEventListener('click', function (event) {
if (event.target.classList.contains('delete-btn')) {
// 执行删除
}
});
事件委托是前端面试的高频考点，也是实际开发中一个很实用的技巧。基础版里我先用常规绑定方式让逻辑直白易懂，在扩展部分再改成事件委托写法。先学会走，再跑。
3. 完整实现与代码走读
3.1 页面结构与准备工作
直接开写。先创建项目文件夹，建议起个名字叫js-todo-list，里面放index.html和script.js两个文件。打开编辑器（VS Code就行），先把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>JS基础案例02 - TODO应用</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 40px auto;
padding: 0 16px;
}
ul {
list-style: none;
padding: 0;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
padding: 8px 12px;
margin-bottom: 8px;
border-radius: 4px;
}
.delete-btn {
background: #e74c3c;
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>我的待办清单</h1>
<div>
<input type="text" id="task-input" placeholder="输入新任务，按回车或点击添加">
<button id="add-btn">添加</button>
</div>
<ul id="task-list"></ul>
<script src="script.js"></script>
</body>
</html>
没有路由、没有组件、没有状态管理库，但你已经把一个完整项目的地基打好了。HTML在这里只扮演“静态骨架”的角色，所有动态内容都有JavaScript去构建。注意script标签放在body末尾，这样能确保DOM先被解析完毕，JS再执行时能拿到所有元素——这是原生JS开发里一个非常经典的习惯。
3.2 定义数据结构与核心函数
打开script.js，先设计数据结构和第一个核心函数。
javascript复制let tasks = [];
function renderTasks() {
const taskList = document.getElementById('task-list');
taskList.innerHTML = '';
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
const taskItem = document.createElement('li');
taskItem.className = 'task-item';
const taskContent = document.createElement('span');
taskContent.textContent = task.content;
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
taskItem.appendChild(taskContent);
taskItem.appendChild(deleteBtn);
taskList.appendChild(taskItem);
}
}
这个就是整个项目的核心引擎。tasks数组是数据层，renderTasks是视图层，只要数据变了，就调用一次renderTasks，界面就会同步更新。很多初学者不理解为什么渲染前要清空列表，也就是那句taskList.innerHTML = ''。原因很简单：渲染函数做的事情是“根据当前数据重建整个列表”，而不是“往列表里追加内容”。如果不清空，每次调用renderTasks都会把已有任务重新渲染一遍，然后新任务再加进来，列表里就会出现重复。这是新手最容易犯的错误之一。
循环里的细节也要注意：先创建li，再创建内部的span和button，用appendChild逐层组装，最后挂到ul上。这个流程就是createElement的典型用法。我把删除按钮的文本设为“删除”，并给它一个delete-btn类，这样后面绑定事件时就能通过这个类找到它。
这里还涉及一个作用域的细节：for循环里的task变量是用const声明的。每次循环，task都是一个新的绑定。用let或const配合块级作用域，不会出现用var时那种后面引用的全都是同一个变量的情况。这也是ES6之后写循环的一个规范习惯。
3.3 添加任务的完整流程
接下来是添加任务的逻辑，这是最核心的交互环节。
javascript复制function addTask() {
const inputBox = document.getElementById('task-input');
const content = inputBox.value.trim();
if (content === '') {
alert('任务内容不能为空！');
return;
}
const task = {
id: Date.now(),
content: content
};
tasks.push(task);
inputBox.value = '';
inputBox.focus();
renderTasks();
}
逐行拆解。第一件事是读取输入框的值，然后调用trim()方法去掉首尾空格。这一步非常关键，你觉得输入了" 买牛奶 "和"买牛奶"应该是同一件事，如果不trim，空格会被当成有效内容存进数组，列表里出现一个看起来只有一个空格的空白任务，排查起来相当头疼。判断空串之后，用alert给用户一个明确的提示。
接下来是构造任务对象的逻辑。我给它两个字段：id和content。content就是任务内容，id用Date.now()生成一个基于当前时间戳的数字。为什么非要这个id？因为后面做删除操作时，你得知道用户想删的是哪一条数据，而数组里最好别用下标来定位——插入和删除操作会导致下标不断变化。用这个id作为任务的唯一标识，就是为后续的删除功能提前打好的基础。
最后三步的顺序值得细品：先把数据存进数组，再把输入框清空并重新聚焦，最后才渲染列表。前两步是“数据操作”，最后一步是“视图同步”。这个顺序逻辑上很通顺——先改数据，再同步视图，不会出现“界面已经变了但数组里还没存上”的不一致状态。inputBox.focus()是个体验上的加分项，执行完添加后光标回到输入框，用户可以连续输入，不用再拿鼠标去点。
3.4 删除任务与空状态优化
基础版要支持删除，这里先演示常规写法：在创建每个删除按钮时绑定对应的事件。
javascript复制function addTask() {
// ... 上面的代码不变
const taskItem = document.createElement('li');
taskItem.className = 'task-item';
taskItem.dataset.id = task.id;
const taskContent = document.createElement('span');
taskContent.textContent = task.content;
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', function () {
deleteTask(task.id);
});
taskItem.appendChild(taskContent);
taskItem.appendChild(deleteBtn);
taskList.appendChild(taskItem);
}
function deleteTask(taskId) {
tasks = tasks.filter(function (task) {
return task.id !== taskId;
});
renderTasks();
}
这里有两个重要的知识点。第一个是dataset属性，我用taskItem.dataset.id把任务的id挂在DOM元素的data-id属性上。数据存在DOM上不是必须的，但调试时页面上能看到每条任务对应的id，查问题方便。
第二个是filter的用法。array.filter会返回一个新数组，由所有使回调函数返回true的元素组成。我要删掉id匹配的那个，所以条件是`task.id !== taskId，满足这个条件（即不是目标任务）的保留下来。这是一个非常经典、面试必考的数组删除写法。
删除逻辑设计成这样很安全，因为id具有唯一性，不会误删。删除成功以后，再次执行renderTasks刷新列表，页面上的这条任务就消失了。整个流程完全遵循“先改数据再同步视图”的原则。
最后加一个空状态优化，让列表没有数据时也有个友好提示：
javascript复制function renderTasks() {
const taskList = document.getElementById('task-list');
taskList.innerHTML = '';
if (tasks.length === 0) {
const emptyTip = document.createElement('li');
emptyTip.textContent = '暂无任务，先添加一条吧';
emptyTip.style.color = '#999';
emptyTip.style.listStyle = 'none';
taskList.appendChild(emptyTip);
return;
}
// ... 循环渲染
}
空状态是产品思维里很小但体验提升明显的部分，很多时候界面空白会让用户以为自己操作失败了，一句提示就能打消疑虑。
3.5 事件绑定的完整实现
把事件绑定整理好，项目就能跑起来了。我把绑定逻辑放在页面加载后的初始化函数里：
javascript复制function init() {
const inputBox = document.getElementById('task-input');
const addButton = document.getElementById('add-btn');
addButton.addEventListener('click', addTask);
inputBox.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
addTask();
}
});
renderTasks();
}
init();
用init()函数来组织初始化逻辑是个好习惯。有些教程会在script标签底部直接写一堆事件绑定代码，这里有个问题：变量污染——所有变量都会变成全局变量，项目一大就很难追踪。用函数包一层，把绑定逻辑和初始化动作清晰地隔离开。
还有一个细节值得注意：addTask里我已经在读取inputBox的值了，而init里又用getElementById取了一次同一个元素。每次addTask被调用时都重新取元素，其实有点浪费。更现代的写法是把inputBox和addButton的引用提升到全局或闭包作用域。但基础阶段这样写有个好处：逻辑更直白，每步操作都清清楚楚，后面优化时可改的地方也多。我先保持直观为主。
功能跑通之后，你可以打开浏览器控制台观察一下tasks数组的变化。你会发现每次添加、删除，数组都在同步变化——这就是“数据驱动视图”最朴素的雏形。
4. 踩坑记录、调试技巧与扩展方向
4.1 新手最容易踩的四个坑
这个项目我带着很多同学写过，新手踩坑记录高度一致，每条都值得总结成经验。
第一个坑是忘记trim导致空任务入列。输入内容全是空格时，判断条件inputBox.value ===== ''会直接放行，结果列表里出现一条看似空白的任务。解决办法就是用trim()去掉首尾空格再做判断。
第二个坑是renderTasks里忘了清空列表。这个前面分析过，不清空就会导致任务重复渲染。其实这里的本质问题是“重绘整个列表”和“追加到列表末尾”这两种模式没分清。重绘就必须先清空，追加就不能用innerHTML = ''。想明白这个逻辑，你就能根据自己的需求选择正确的渲染方式。
第三个坑是事件绑定写在动态创建的元素之前。很多初学者先把addEventListener绑在一个刚创建、还没挂到页面的按钮上，看起来没问题，但如果是用init里统一取元素的方式绑定，动态创建的元素还没存在，getElementById拿不到，事件自然绑不上。正确的打开方式是在创建按钮的同时就绑定事件，或者用后面要讲的事件委托。
第四个坑是回车事件里没调用event.preventDefault()。某些表单场景下，按回车会触发默认的提交行为，导致页面刷新，你的数据全没了。这个案例里没有form标签，所以不会触发这种问题，但在实际项目中一碰到表单就得打起精神，回车默认行为是个经典坑。
4.2 用浏览器调试而非瞎猜
写JS调试是最重要的一项基本功。工具就在浏览器里：Console面板和Sources面板。我的建议是，任何一次操作流程，先在代码里用console.log输出关键状态值，比如加完任务后log一下tasks数组，看看到底存进去没有。确认数据层是对的，再看视图层为什么不更新。
举个例子，你的代码里：
javascript复制console.log('当前任务列表:', tasks);
然后打开浏览器开发者工具，操作一次添加，观察控制台输出。如果tasks是空的，说明数据层没写入，问题在addTask里的取值或push逻辑；如果tasks有数据但页面没显示，说明问题在视图层，要么renderTasks没被调用，要么循环逻辑有问题。这种“数据层与视图层分离”的排查思路，在以后排查更复杂的bug时同样适用。
Sources面板还有一个断点调试功能，在addTask函数那一行打上断点，逐步执行，每走一步都能看到变量的实时状态。这个方法对新手尤其友好，可以看到执行流程的每一步。
4.3 作业与扩展方向
这个项目我建议你至少做三次。第一次照做，练手。第二次不看源码、只凭记忆完整复现，检验自己是否真正掌握。第三次加一些新功能，把项目变成自己的。
扩展方向我列几个，依次递增难度：
第一，把数据存储到localStorage里，刷新页面数据还在。这个要理解localStorage只能存字符串，需要JSON.stringify把数组转成字符串存进去，取出时再用JSON.parse解析回数组。
第二，用事件委托优化删除逻辑。把监听器绑定到taskList上，通过事件对象的target判断是不是删除按钮，这样可以去掉每个按钮上的单独绑定。
javascript复制taskList.addEventListener('click', function (event) {
if (event.target.classList.contains('delete-btn')) {
const taskItem = event.target.closest('.task-item');
const taskId = Number(taskItem.dataset.id);
deleteTask(taskId);
}
});
第三，加入筛选功能：全部/未完成/已完成。这个涉及给任务对象增加一个completed属性，以及利用数组的filter方法按状态渲染。
4.4 为什么说这个项目是终身的
这个TODO项目做完了，但它的价值才刚刚开始。以后你学了ES6的箭头函数、解构赋值，学了模块化、学了前端框架，都可以回头用这个项目练手——把它用箭头函数重写一遍，把它拆成模块重写一遍，用Vue或React重写一遍，用TypeScript重写一遍。
每次重写你都会发现，自己以前的理解其实不全面。比如写多了以后你会发现，以前写的renderTasks每次重建整个列表，性能并不好，其实还可以优化成差量更新。比如你学了事件委托以后，再看自己之前写的代码，会觉得还有多少可以优化的地方。这就是基础项目反复重构的价值——它像一个标尺，丈量出你每个阶段的真实水平。
我个人这几年带人最大的体会是，能把一个简单项目反复打磨到一个层次的人，普遍比那些四处追逐新技术、贪多嚼不烂的人成长快得多。你手里这个TODO项目，恰好是那个值得反反复复打磨的“小而美”项目。趁着这股劲头，把它写完、写透、写到顺手拈来，后面的路会轻松很多。