DOM入门知识
1. 什么是DOM？
DOM（文档对象模型）就像网页的"骨架"，浏览器把HTML变成一棵树，JavaScript可以通过这棵树来修改网页内容。
DOM的简单理解
- 每个HTML标签都是一个节点（Node）
- 整个网页是最大的节点（
document）（可以不用获取直接引用） - 我们可以用JavaScript找到并修改这些节点
- 获取DOM对象
获取单个元素
// 通过ID获取（等效于getElementById，但更通用）
const header = document.querySelector("#header");// 通过类名获取第一个匹配元素
const firstButton = document.querySelector(".btn");
获取多个元素
// 获取所有类名为btn的元素（返回NodeList）
const buttons = document.querySelectorAll(".btn");
buttons.forEach(button => {button.style.color = "red";
});
📌 注意：
querySelector返回第一个匹配元素，未找到则返回null。
querySelectorAll返回所有匹配元素的静态NodeList（非实时更新）68。
3. 操作元素内容（修改文字/HTML）
找到元素后，就可以修改它的内容了：
修改文字内容
const title = document.querySelector("title");
title.innerText = "新的标题"; // 只修改文字
修改HTML内容
const box = document.querySelector(".box");
box.innerHTML = "<strong>加粗的文字</strong>"; // 会解析HTML标签
4. 修改元素属性
HTML标签的属性（如src、href）也可以修改：
常用属性操作
const image = document.querySelector("img");// 读取属性
console.log(image.src); // 打印图片地址// 修改属性
image.src = "new-image.jpg"; // 更换图片
image.alt = "这是一张新图片"; // 修改提示文字
修改样式
const box = document.querySelector("box");// 直接改样式
box.style.backgroundColor = "blue";
box.style.fontSize = "20px";// 通过class改（推荐）
box.classList.add("active"); // 添加class
box.classList.remove("old"); // 删除class
box.classList.toggle("hidden"); // 切换class（有就删，没有就加）
5. 自定义属性（data-*）
HTML5允许我们添加自定义属性，用来存储额外信息：
HTML设置
<div id="user" data-user-id="123" data-role="admin">用户信息</div>
JavaScript读取
const user = document.querySelector("user");// 读取
console.log(user.dataset.userId); // "123"
console.log(user.dataset.role); // "admin"// 修改
user.dataset.role = "guest";
🌟 优点：不会和标准属性冲突，适合存储临时数据
6. 总结
| 操作 | 代码示例 |
|---|---|
| 获取元素 | document.querySelector("id") |
| 修改文字 | element.innerText = "新内容" |
| 修改HTML | element.innerHTML = "<b>内容</b>" |
| 修改属性 | img.src = "new.jpg" |
| 修改样式 | box.style.color = "red" |
| 操作class | box.classList.add("active") |
| 自定义属性 | element.dataset.xxx = "值" |
🎯 记住：DOM操作就像用遥控器操作电视，要先找到按钮（获取元素），再按下按钮（执行操作）！