DOM是什么？DOM与Window的关系、浏览器中位置及图形化表示请求

一、DOM的定义 #

咱们先从最基础的说起：DOM全称是Document Object Model（文档对象模型）。简单来讲，当浏览器加载你的HTML页面时，会把原本纯文本的HTML代码解析成一个树形结构的对象集合。你写的每一个标签（比如<html>、<div>、<p>）、每一段文本、甚至每个属性，都会变成这个树上的一个“节点”。

有了这个模型，你就能通过JavaScript轻松操作页面内容——比如修改某个按钮的文字、隐藏一个弹窗、动态添加新的列表项，这些本质上都是在操作DOM节点。

二、DOM与Window的关系 #

接下来聊它俩的核心关系：Window是浏览器全局环境的顶层对象，而DOM的核心载体document是Window对象的一个关键属性。

举个例子：你平时写console.log()的时候，其实省略了前面的window.，完整写法是window.console.log()；同样，你用document.getElementById()的时候，本质上是在调用window.document.getElementById()。

换句话说，Window就像是一个大容器，装着所有浏览器相关的API和全局资源，而DOM（以document为入口）是这个大容器里专门负责处理页面文档内容的那一部分。

三、二者在浏览器中的具体位置 #

咱们拆分来看：

• Window对象：它是浏览器为每个打开的标签页创建的全局上下文。不管是浏览器窗口的大小（window.innerWidth）、历史记录（window.history）、地址栏信息（window.location），还是JS的全局变量、定时器（setTimeout），全都挂在Window对象上。它是整个JavaScript运行环境的“根”。
• DOM（以document为核心）：它是Window对象下的一个分支，专门对应当前页面的文档结构。浏览器完成HTML解析后生成的DOM树，就挂载在window.document这个属性上。所有针对页面内容的操作，都要通过这个入口来进行。

四、图形化结构示意图 #

用文本树形结构来直观展示二者的层级关系：

Window (全局顶层对象)
├─ console (控制台操作API)
├─ setTimeout/setInterval (定时器API)
├─ history (页面历史记录)
├─ location (地址栏信息)
├─ document (DOM核心入口)
│  ├─ documentElement (对应<html>根节点)
│  │  ├─ head (页面头部节点)
│  │  │  ├─ title (页面标题)
│  │  │  └─ meta/link/style 等子节点
│  │  └─ body (页面主体节点)
│  │     ├─ div/p/span 等元素节点
│  │     ├─ 文本节点
│  │     └─ 属性节点
│  ├─ getElementById()/querySelector() (DOM查询方法)
│  └─ createElement()/appendChild() (DOM创建/添加方法)
└─ 全局变量、其他浏览器API

内容的提问来源于stack exchange，提问作者Ajit Kumar