DOM 入门：搞懂节点树，才算真正摸到前端的门，也才看得懂 Web 安全

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