JavaScript中BOM、DOM、Document的爱恨情仇

最新推荐文章于 2021-10-06 08:59:48 发布

原创最新推荐文章于 2021-10-06 08:59:48 发布 · 787 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了JavaScript的三个核心组成部分：ECMAScript、DOM和BOM。详细解释了DOM用于操作网页内容，而BOM则用于控制浏览器行为。同时提供了常用操作指令帮助读者更好地理解和使用。

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

在这里插入图片描述

老规矩，先来美图一张！

然后来说说今天的主要对象，JavaScript，哦，这个不能叫对象，严格意义上来说，它是**基于原型的面向对象语言**！

那么JavaScript是由什么组成呢？

JavaScript的实现包括以下3个部分，根据宿主（浏览器）的不同，具体的表现形式也不尽相同。

1、核心（ECMAScript）：描述了JS的语法和基本对象。

2、文档对象模型 （DOM）：处理网页内容的方法和接口。
DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]。
DOM 是为了操作文档出现的 API，document 是其的一个对象；

3、浏览器对象模型（BOM）：与浏览器交互的方法和接口。
BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现
表现为不同浏览器定义有差别,实现方式不同。
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

通俗的来说，DOM（文本对象模型，对浏览器的内容进行操作）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

文档对象模型（DOM）将标记语言文档的各个组成部分封装为对象。可以使用这些对象对标记语言文档进行CRUD（增删查改）的动态操作。

BOM（浏览器模型，对浏览器本身进行操作） 主要处理浏览器窗口和框架。
不过通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。

浏览器对象模型（BOM）将浏览器的各个组成部分封装成为对象。
其中Window是BOM最重要的对象。

在这里插入图片描述

两者还是有很大区别的：

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div>这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

在这里插入图片描述

当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。在一个浏览器窗口中可能有多个 document，例如，通过 iframe 加载的页面，每一个都是一个 document。
BOM 是 Browser Object Model，浏览器对象模型。
刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要 location.href = “http://www.xxxx.com”;这个 location 就是 BOM 里的一个对象。
由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

所以两者的关系可以概括为：

在这里插入图片描述