48 lines
857 B
Markdown
48 lines
857 B
Markdown
# 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. 实现表单验证功能
|