再谈 BOM 和 DOM(1):BOM 与 DOM 概述

关注

发布于: 58 分钟前

JavaScript 的实现包括以下 3 个部分：

ECMAScript(核心)：描述了 JS 的语法和基本对象。
浏览器对象模型（BOM）：与浏览器交互的方法和接口
文档对象模型（DOM）：处理网页内容的方法和接口

DOM-文档对象模型

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口，是操作文档出现的 API，是为了操作文档出现的接口。DOM 代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过 js 去读取这张地图。

D（文档-document）可以理解为整个 Web 加载的网页文档
O（对象-object）可以理解为类似 window 对象只来的东西，可以调用属性和方法，这里我们说的是 document 对象，
M（模型-model）可以理解为网页文档的树形结构，DOM 树由节点构成

BOM-浏览器对象模型

BOM 是 Browser Object Model，浏览器对象模型，BOM 主要是处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口：alert、confirm、prompt
移动、关闭浏览器窗口以及调整窗口大小：scrollTo、moveTo、resizeTo 等
提供 Web 浏览器详细信息的定位对象：Navigator、History
提供用户屏幕分辨率详细信息的屏幕对象：Screen
对 cookie 的支持：cookie
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

window 对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为 BOM

DOM 包含：window

Window 对象包含属性：document、location、navigator、screen、history、frames
Document 根节点包含子节点：forms、location、anchors、images、links

从 window.document 已然可以看出，DOM 的最根本的对象是 BOM 的 window 对象的子对象。

区别：DOM 描述了处理网页内容的方法和接口，BOM 描述了与浏览器进行交互的方法和接口。

根据 W3C DOM 规范，DOM 是 HTML 与 XML 的应用编程接口（API），DOM 将整个页面映射为一个由层次节点组成的文件。有 1 级、2 级、3 级共 3 个级别。

BOM 与 DOM 的对比

BOM 为了处理浏览器窗口和框架
DOM 为了操作文档出现的接口，是 HTML 和 XML 的应用程序接口（API）。
DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]
BOM 是各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
window 是 BOM 对象，而非 js 对象；

javacsript 是通过访问 BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于 BOM 的 window 包含了 document，window 对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用 window 对象的 document 属性，通过 document 属性就可以访问、检索、修改 XHTML 文档内容与结构。因为 document 对象又是 DOM（Document Object Model）模型的根节点。可以说，BOM 包含了 DOM(对象)，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档。其中 DOM 包含：window