# DOM 操作与事件

## 学习目标
- 理解 DOM 树结构
- 掌握元素选择方法
- 学会事件处理

## 选择元素

```javascript
document.getElementById("header");
document.querySelector(".title");
document.querySelectorAll("p");
```

## 修改内容

```javascript
const el = document.querySelector("h1");
el.textContent = "新标题";
el.style.color = "red";
el.classList.add("active");
```

## 事件处理

```javascript
const btn = document.querySelector("button");
btn.addEventListener("click", function() {
    console.log("按钮被点击了！");
});
```

## 常见事件

| 事件 | 说明 |
|------|------|
| `click` | 点击事件 |
| `mouseover` | 鼠标悬停 |
| `keydown` | 键盘按下 |
| `submit` | 表单提交 |

## 动手练习

1. 实现点击按钮改变背景色
2. 制作图片轮播效果
3. 实现表单验证功能