DOM, DOCUMENT, BOM, WINDOW 有什么区别?

本文用通俗语言解释了JS里的DOM和BOM概念。DOM是针对HTML和XML的API,将HTML视为对象树,用于操作网页元素;document是DOM树的根节点。BOM则是控制浏览器行为的接口,可实现页面跳转等操作,window是BOM的一个对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我试着用通俗的语言解释一下。

这几个都是 JS 里面的概念。

先说 DOM

DOM 全称是 Document Object Model,也就是文档对象模型。

DOM 就是针对 HTML 和 XML 提供的一个API。什么意思?就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类。



DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了:

document.title = 'how to make love';

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

document

当浏览器下载到一个网页,通常是 HTML,这个 HTML 就叫 document(当然,这也是 DOM 树中的一个 node),从上图可以看到,document 通常是整个 DOM 树的根节点。这个 document 包含了标题(document.title)、URL(document.URL)等属性,可以直接在 JS 中访问到。

在一个浏览器窗口中可能有多个 document,例如,通过 iframe 加载的页面,每一个都是一个 document。

在 JS 中,可以通过 document 访问其子节点(其实任何节点都可以),如

document.body;
document.getElementById('xxx');

BOM

BOM 是 Browser Object Model,浏览器对象模型。

刚才说过 DOM 是为了操作文档出现的接口,那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。

所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要

location.href = "http://www.xxxx.com";

这个 location 就是 BOM 里的一个对象。

window

window 也是 BOM 的一个对象,除去编程意义上的“兜底对象”之外,通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口:

window.close();


总结一下题主的问题:

DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
### 关于DOMBOM的知识点总结 #### 一、DOMDocument Object Model) 文档对象模型(DOM)是用于表示操作HTML或XML文档的标准编程接口。它提供了一种结构化的方式来访问修改网页的内容、样式以及行为。 1. **定义与作用** - DOM 是一种标准的编程接口,允许开发者通过脚本动态地访问并更改页面中的任何部分[^1]。 2. **核心概念** - HTML 文档被建模成一棵树形结构,其中每个节点代表文档的一部分,例如元素、属性或者文本内容。 ```javascript const element = document.createElement('div'); // 创建一个新的 div 节点 ``` 3. **常用 API 方法** - 获取单个元素的方法: - `getElementById`:基于 ID 属性值返回指定的单一元素[^2]。 ```javascript const elem = document.getElementById('myId'); ``` - H5 新增方法 `querySelector`:支持 CSS 选择器语法来定位第一个匹配的元素[^2]。 ```javascript const firstMatchedElem = document.querySelector('.className'); ``` - 获取多个元素的方法: - `getElementsByTagName` `getElementsByClassName` 返回一组符合条件的节点集合[^2]。 ```javascript const elemsWithTag = document.getElementsByTagName('p'); const elemsWithClass = document.getElementsByClassName('highlight'); ``` - 使用 H5 的 `querySelectorAll` 来选取所有满足条件的选择器列表。 ```javascript const allMatches = document.querySelectorAll('a[href]'); ``` 4. **节点关系操作** - 利用父子兄弟节点的关系可以灵活遍历整个 DOM 树[^2]: - 父节点:`parentNode` - 子节点:`children`, `firstChild`, `lastChild` - 兄弟节点:`previousElementSibling`, `nextElementSibling` --- #### 二、BOM(Browser Object Model) 浏览器对象模型(BOM)是由 JavaScript 封装的一组对象,主要用于控制浏览器窗口的行为及其内部环境设置。 1. **定义与作用** - BOM 并未由 W3C 定义标准化,而是随着 Web 技术发展逐渐形成事实上的约定。它的顶层对象为 `window`,所有的全局变量函数都挂载在其下[^3]。 2. **主要功能模块** - 控制窗口大小位置:如调整弹窗尺寸或移动到特定坐标; ```javascript window.resizeTo(800, 600); // 设置当前窗口宽高分别为800px * 600px window.moveTo(100, 100); // 移动至屏幕左上角偏移量 (100,100) ``` - 导航历史管理:前进后退跳转链接等功能实现依赖 history 对象; ```javascript window.history.back(); // 后退一页 window.location.href='http://example.com'; // 修改地址栏URL触发加载新的资源文件 ``` 3. **其他重要特性** - 时间处理机制:定时执行某些任务可用 setTimeout 或 setInterval 函数完成[^3]; ```javascript let timerID=setTimeout(() => alert("Hello"), 3000); clearInterval(timerID); // 清除循环计时器实例 ``` - 用户交互反馈提示框:confirm/prompt/alert 均属于此类别[^3]. --- ### 总结对比 | 特性 | DOM | BOM | |----------------|-----------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------| | 主要用途 | 表示操作HTML/XML文档 | 操作浏览器整体行为 | | 中心对象 | Document | Window | | 数据存储方式 | 结构化的树状数据 | 集合式的键值对形式 | 尽管两者同属JavaScript组成部分之一,但它们各自侧重点完全不同——前者专注于具体web页面构建维护工作流程;后者则更偏向宏观层面的整体协调运作过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值