很多人学 JavaScript，刚开始总觉得自己会点alert()、会点按钮点击事件，就算入门了。
但只要一碰到页面元素操作，立刻就开始发懵：
- 为什么这个标签能拿到，那个拿不到？
document到底是什么？document.title为什么拿到的是文字，不是标签？- 为什么安全测试里老在说 DOM XSS、DOM 污染、DOM 操作？
说白了，如果你没搞懂 DOM，前端很多东西你只是“会抄代码”，不是真懂。
更关键的是，对网络安全从业者来说，DOM 不只是前端知识点，它还是理解这些问题的基础：
- 前端页面是怎么组织的
- 浏览器是怎么解析标签的
- 用户输入最终会进入哪里
- 哪些 DOM 操作容易引发 XSS
- 页面内容是怎么被 JavaScript 动态改写的
今天这篇文章，就从最基础的 DOM 认知开始，带你把这块真正捋顺。
为了方便你发头条，我还把每个知识点都配上了思维导图结构建议，你可以直接拿去做配图。
一、先说结论：DOM 到底是什么？
DOM，英文全称Document Object Model，中文叫文档对象模型。
你可以先把它理解成一句人话：
浏览器为了让 JavaScript 能“看见”并“操作”网页，把整个 HTML 文档组织成一棵对象树，这套树形结构就叫 DOM。
也就是说，在浏览器眼里，网页不是一堆散乱的标签，而是一棵有层级关系的树。
比如下面这段最简单的 HTML：
<!DOCTYPEhtml><html><head><title>DOM测试页面</title></head><body><h1>欢迎学习 DOM</h1><p>这是一个段落</p></body></html>浏览器解析后，它在逻辑上就像这样：
- document
- html
- head
- title
- body
- h1
- p
- head
- html
这就是所谓的节点树。
二、JavaScript 其实不只是“语法”，它有三块核心内容
很多初学者把 JavaScript 只理解成变量、函数、循环、判断。
这其实只看到了其中一部分。
从学习路径上看，JavaScript 相关内容通常可以分成三块：
1. ECMAScript
这是 JS 的语法规范，规定了语言层面的规则，比如：
var、let、constfunction- 数组
- 对象
- 条件判断
- 循环
- 类、Promise、箭头函数等
你可以把它理解成：
这是 JS 的“语法骨架”。
2. DOM
也就是文档对象模型，核心是：
- 获取页面元素
- 修改页面内容
- 操作标签属性
- 修改样式
- 响应用户事件
你平时写的：
document.getElementById("box")这就是 DOM 范畴。
3. BOM
BOM 是Browser Object Model，中文叫浏览器对象模型。
它关注的是浏览器本身，而不是页面文档。
比如：
windowlocationhistorynavigatoralert()setTimeout()
BOM 更像是在操作“浏览器环境”。
JavaScript 三大组成部分
三、什么是节点？什么又叫节点树？
在 DOM 里，网页中的元素会被抽象成一个个“节点”。
简单理解，像这些标签：
<html><head><body><title><div><p>
都可以看成节点。
而节点之间并不是平级堆在一起，它们有明确的层级关系：
- 父节点
- 子节点
- 兄弟节点
- 祖先节点
- 后代节点
比如看这段代码：
<html><head><title>标题</title></head><body><div><p>内容</p></div></body></html>它的层级关系就是：
html是最外层节点head和body是html的子节点title是head的子节点div是body的子节点p是div的子节点
这整套关系连起来，就形成了一棵树，所以叫节点树。
节点树结构认知
四、document 到底是什么？为什么它这么重要？
在浏览器里，DOM 的入口对象就是document。
你可以把document理解成：
整个网页文档在 JavaScript 里的总入口。
也就是说，你想操作页面上的元素，基本都得从它开始。
比如：
console.log(document);运行后，你会在浏览器控制台看到整个文档对象。
代码示例
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title
