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：

<!DOCTYPE html>
<html>
<head>
  <title>DOM测试页面</title>
</head>
<body>
  <h1>欢迎学习 DOM</h1>
  <p>这是一个段落</p>
</body>
</html>

浏览器解析后，它在逻辑上就像这样：

document
- html
  - head
    - title
  - body
    - h1
    - p

这就是所谓的节点树。

二、JavaScript 其实不只是“语法”，它有三块核心内容

很多初学者把 JavaScript 只理解成变量、函数、循环、判断。
这其实只看到了其中一部分。

从学习路径上看，JavaScript 相关内容通常可以分成三块：

1. ECMAScript

这是 JS 的语法规范，规定了语言层面的规则，比如：

var、let、const
function
数组
对象
条件判断
循环
类、Promise、箭头函数等

你可以把它理解成：
这是 JS 的“语法骨架”。

2. DOM

也就是文档对象模型，核心是：

获取页面元素
修改页面内容
操作标签属性
修改样式
响应用户事件

你平时写的：

document.getElementById("box")

这就是 DOM 范畴。

3. BOM

BOM 是 Browser Object Model，中文叫 浏览器对象模型。
它关注的是浏览器本身，而不是页面文档。

比如：

window
location
history
navigator
alert()
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);

运行后，你会在浏览器控制台看到整个文档对象。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/weixin_41489908/article/details/160247191

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