INTERMEDIATE
2 hours•4 chapters
DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
Progress: 0%In progress
What You'll Learn
使用 getElementById 和 querySelector 选取页面元素
更新文本、属性和样式，并响应点击和输入事件
创建和移除元素，并使用事件委托从数据渲染页面
处理带验证的表单提交，并保持更新快速、响应灵敏
Description
DOM 操作是网页在加载之后发生变化的方式——显示一条消息、向表格添加一行、验证一个表单、响应一次点击。本教程涵盖浏览器原生 API（getElementById、querySelector、textContent、classList、addEventListener、createElement），所有框架都构建在它们之上。
你将学习四个章节，配有可运行的代码示例和一个可以在浏览器里直接点击的交互式待办事项演示，旁边附有等价的原生 DOM 代码。每章还会展示如何向 AI 助手描述你想要的行为，并检查它返回的结果。
学完之后，你将能够安全地选取元素、绑定事件、从数据数组渲染列表、在提交时验证表单，并避免那些让页面感觉卡顿的 layout thrashing（布局抖动）模式。
What's inside
About 2 hours•4 chapters
- 1.选取元素 —— 什么是 DOM，用 getElementById 和 querySelector 查找元素，以及向 AI 助手描述你想要的改动。
- 2.文本、样式与事件 —— 读取和修改文本、属性与样式，并绑定你的第一批 click 和 input 监听器。
- 3.事件与渲染 —— 创建和移除元素、事件委托，以及从数据数组渲染 DOM。
- 4.表单与性能 —— 处理带验证的表单提交，以及批量更新和防抖，打造快速、响应灵敏的应用。
Work through the chapters in order — each one builds on the last, and the live to-do demo in Chapter 3 lets you run the concepts for real.