常见交互实战

把本节知识串起来，做一个迷你待办事项（TodoList）：输入内容点按钮或按回车添加，点击条目删除。它涵盖了 DOM 开发的完整套路——拿元素 → 监听事件 → 读取输入 → 校验 → 创建节点 → 更新页面 → 清空输入。

几个细节值得体会：value.trim() 去掉首尾空格，防止添加纯空格内容；空内容直接 return 是「卫语句」写法，提前退出比层层嵌套 if 清爽；回车添加通过监听输入框的 keydown 判断 e.key === 'Enter' 实现；删除直接复用「点击条目就 remove」的简单逻辑。

这个不到 20 行的小例子是前端面试的经典入门题，也是所有列表类交互（评论区、购物车）的雏形，建议脱离教程亲手敲一遍。

本节要点交互开发的固定套路：监听事件 → 读输入 → 校验 → 更新 DOM → 清空输入；trim 防空内容；keydown + Enter 支持回车提交。

HTML

<input id="inp" placeholder="输入待办事项">
<button id="btn">添加</button>
<ul id="list"></ul>
<script>
  const inp = document.getElementById('inp');
  const list = document.getElementById('list');

  function addItem() {
    const text = inp.value.trim();      // 去掉首尾空格
    if (!text) return;                  // 空内容直接退出

    const li = document.createElement('li');
    li.textContent = text;
    li.addEventListener('click', () => li.remove()); // 点击删除

    list.append(li);
    inp.value = '';                     // 清空输入框
    inp.focus();                        // 焦点回到输入框
    console.log('待办数量：' + list.children.length);
  }

  document.getElementById('btn').addEventListener('click', addItem);
  inp.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') addItem();   // 回车也能添加
  });
</script>

🔗 相关词条DOM 前端元素节点列表事件

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读