再谈BOM和DOM(1):BOM与DOM概述
Author：zhoulujun Date：
JavaScript的实现包括以下3个部分：
ECMAScript(核心)：描述了JS的语法和基本对象。
浏览器对象模型（BOM）：与浏览器交互的方法和接口
文档对象模型 （DOM）：处理网页内容的方法和接口
DOM-文档对象模型
DOM（文档对象模型）是 HTML 和 XML 的应用程序接口，是操作文档出现的 API，是为了操作文档出现的接口。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过js去读取这张地图——DOM树，这树由Node构成，Node分为 Document、Element（元素）和 Text（文本），以及其他不重要的（根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件）。
D（文档-document）可以理解为整个Web加载的网页文档。
浏览器原生提供document节点，代表整个文档， 文档的第一层只有一个节点，就是 HTML 网页的第一个标签<html>，它构成了树结构的根节点（root node）
O（对象-object）可以理解为类似window对象类的东西，可以调用属性和方法，这里我们说的是document对象，
他是在内存中，按照树型结构通过构造函数(如Node,Element,Document三个构造函数)，构造出对象，将 DOM 展现到内存中。
M（模型-model）可以理解为网页文档的树形结构，DOM树由节点构成
因为在 HTML结构 在内存中可以用一个模型来表示,这个模型就是树型结构
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——BOM的核心是Window
Window对象包含属性：document、location、navigator、screen、history、frames
Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
上文可以看出DOM与BOM的区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。
但是由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
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
BOM和DOM的结构关系示意图
更细致的介绍：https://dom.spec.whatwg.org/
参考文章：
ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）https://www.cnblogs.com/best/p/8028168.html
JavaScript学习总结（三）BOM和DOM详解 https://segmentfault.com/a/1190000000654274
Javascript操作BOM和DOM详解（1） https://blog.csdn.net/openbox2008/article/details/85260063
JavaWeb学习总结：JavaScript（BOM和DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198
HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp
XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp
JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html
DOM总结 https://zhuanlan.zhihu.com/p/48211580
转载本站文章《再谈BOM和DOM(1):BOM与DOM概述》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8346.html