你有没有想过，JavaScript是怎么"抓住"网页上的按钮、改文字颜色、藏掉一张图的？浏览器里其实藏着一棵树。

一棵树，三个词

打开网易新闻 查看精彩图片

DOM全称文档对象模型（Document Object Model）。拆开看就三件事：

Document——浏览器里加载的那整个HTML文件，是入口。想动页面任何东西，得从这里进门。

Object——页面每个零件都是对象。整个页面是一个对象，每个

、是元素对象，id和class这些属性也是对象。

Model——这些对象不是乱堆的，是按树形结构组织的。浏览器把HTML代码转成一棵层级分明的树，document是树根，元素、属性、文本都是上面的节点。

浏览器怎么"画"出这棵树

你写了一段HTML，浏览器收到后做的第一件事：解析标签，建一棵树。是根，下面分叉出和，再分叉出

……每个标签变成一个节点，嵌套关系变成父子关系。

这棵树建好后，JavaScript才能用方法去"抓"节点。比如getElementById，按ID精准抓一个；querySelector更灵活，用CSS选择器语法去匹配。没有这棵树，JS就是盲人摸象。

为什么面试必问DOM

原文列了十个面试题的方向，核心考的就一点：你知不知道JS操作页面必须经过这层接口？

直接改HTML字符串？浏览器要重新解析重建，性能爆炸。通过DOM API精准修改某个节点，只更新变化的部分——这才是现代网页流畅的底层逻辑。

理解DOM树结构，才能理解事件委托为什么能提升性能（冒泡机制依赖父子关系），理解虚拟DOM为什么能优化真实DOM的操作次数。

一个实用判断

DOM不是JavaScript独有的概念，但JS是最主要的操控者。下次看到"页面卡顿"，先问自己：是不是DOM操作太频繁、范围太大？减少重排重绘、批量更新节点、用文档片段（DocumentFragment）减少树遍历次数——这些优化思路，都从这棵树开始。