北京
你有没有想过，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）减少树遍历次数——这些优化思路，都从这棵树开始。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
