DOM（文档对象模型）是网页开发的核心概念，它将 HTML 文档转化为可编程的对象集合，允许 JavaScript 动态操作网页内容和结构。以下是关键知识点：
📌 什么是 DOM？
DOM 是浏览器解析 HTML 后生成的树状结构，每个 HTML 元素都对应一个节点（Node）：
- 📌
document是根节点 - 📌
element是网页的构建块 - 📌
attribute是元素的特性
🛠️ 常用 DOM 操作方法
| 操作类型 | 示例代码 | 说明 |
|---|---|---|
| 获取元素 | document.getElementById("myDiv") |
通过 ID 定位元素 |
| 修改内容 | element.innerHTML = "新内容" |
替换元素内部文本 |
| 添加样式 | element.style.color = "red" |
动态改变 CSS 样式 |
| 事件绑定 | element.addEventListener("click", function() {...}) |
响应用户交互 |
🧠 实战技巧
💡 记住：DOM 操作的本质是修改页面结构，而非直接操作 HTML 字符串
⚠️ 注意：频繁操作 DOM 可能导致性能问题，建议批量处理