# DOM + 事件 + 异步

这部分只解决一个问题：你能不能让页面里的元素被 JavaScript 真正控制起来，并对用户操作和异步结果做出响应。

## 学完后你应该掌握

- 如何获取页面元素
- 如何修改文本、样式和类名
- 如何创建、插入和删除节点
- 如何监听点击、输入、提交等事件
- `preventDefault()` 和 `stopPropagation()` 的常见场景
- 事件委托的基本写法
- `prepend()`、`classList.remove()` 的基础使用
- `setTimeout` 的异步顺序
- Promise 的基础用法
- `async` / `await` 的基础写法
- 如何把 DOM、事件、异步组合成一个小页面

## 这一章在解决什么

前面三章分别解决了：

- 页面有什么结构
- 页面长什么样
- 代码逻辑怎么写

这一章开始，JavaScript 不再只是打印到控制台，而是要真正操作页面。

它回答的是：

- 我怎么拿到某个按钮或输入框
- 用户点击后页面怎么变
- 表单提交后怎么处理
- 数据晚一点回来时页面怎么更新

## 必须建立的 5 个核心意识

### 1. 先选中元素，再操作元素

DOM 操作第一步不是“改”，而是“找到”。

常见方式：

- `getElementById`
- `querySelector`
- `querySelectorAll`

### 2. 事件是页面和用户的连接点

页面本身不会“自动响应”。

是你通过事件监听告诉浏览器：

- 点了按钮要做什么
- 输入框变化后要做什么
- 提交表单要做什么

### 3. 改页面就是改 DOM

常见 DOM 改动包括：

- 改文字：`textContent`
- 改类名：`classList`
- 改样式：`style`
- 增删节点：`appendChild`、`remove`

### 4. 异步不是“慢一点执行”，而是“先不阻塞主流程”

比如：

- `setTimeout`
- Promise
- `async` / `await`

这些都意味着：当前代码先继续往下走，结果稍后回来再处理。

### 5. 一个完整交互通常是“事件 + DOM + 状态 + 异步”

例如点击“加载数据”按钮时：

1. 监听点击事件
2. 更新 loading 状态
3. 等待异步结果
4. 把结果渲染到页面

## 高频 API 速记

### 获取元素

- `document.getElementById()`
- `document.querySelector()`
- `document.querySelectorAll()`

### 修改元素

- `textContent`
- `innerHTML`
- `style`
- `classList.add()`
- `classList.remove()`
- `classList.toggle()`

### 节点操作

- `document.createElement()`
- `appendChild()`
- `prepend()`
- `remove()`

### 事件

- `addEventListener()`
- `event.target`
- `preventDefault()`
- `stopPropagation()`

### 异步

- `setTimeout()`
- `Promise`
- `.then()`
- `async`
- `await`

## 学习顺序

1. 获取元素
2. 修改文本、类名、样式
3. 创建和删除节点
4. 点击事件
5. 表单提交和 `preventDefault`
6. 冒泡、委托和 `stopPropagation`
7. `setTimeout` 和异步顺序
8. Promise 渲染
9. `async` / `await`
10. 综合小页面
11. `input` / `change` 事件
12. `prepend`、`classList.remove` 和链接默认行为

## 练习目录

- [01-query-selectors/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/README.md)
- [02-text-class-style/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/README.md)
- [03-create-and-remove/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/README.md)
- [04-click-counter/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/README.md)
- [05-form-submit-and-prevent-default/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/README.md)
- [06-bubbling-and-delegation/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/README.md)
- [07-timers-and-async-order/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/README.md)
- [08-promise-and-render/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/README.md)
- [09-async-await-panel/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/README.md)
- [10-final-dashboard/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/README.md)
- [11-input-live-preview/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/README.md)
- [12-prepend-remove-and-link-default/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/12-prepend-remove-and-link-default/README.md)

## 过关标准

如果你能独立做到下面这些，就说明这一章已经基本过关：

- 能正确选中页面里的元素
- 能改文字、类名和内联样式
- 能动态创建和删除列表项
- 能给按钮、表单绑定事件
- 能理解事件冒泡和事件委托
- 能在需要时使用 `preventDefault()` 和 `stopPropagation()`
- 能处理 `input` / `change` 这类常见表单事件
- 能使用 `prepend()`、`classList.remove()` 完成简单 DOM 调整
- 能理解 `setTimeout` 的异步顺序
- 能用 Promise 和 `async` / `await` 处理一个简单异步流程
- 能做出一个有真实交互的小页面

## 学习建议

- 每个练习都用浏览器打开 `starter.html`
- 打开开发者工具，边看页面边看控制台
- 一个交互没反应时，先确认元素有没有选中
- 一个异步结果不对时，先打印中间状态