文字表述：
BOM 提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览器历史等；
DOM 提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种html元素及其内容。
BOM与DOM的关系：BOM的window对象中包含一个document属性，该属性是对DOM模型的document对象的引用，代表了当前窗口中网页文档所对应的document对象，通过该属性可以访问网页文档的各种内容。
结构图展示：
注释：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
帮助大家理解下可以参考下图：
那就有人说不是单独节点吗怎么里面嵌套的也出来了？那可以再尝试一下，获取页面上的一个div然后打印：
是吧，xmt。
另外补充一个点：document首字母大写和window首字母大写，干什么用的？被window、Window、document、Document四个对象搞乱了.
首先：简单的理解大写开头的是类型，小写的是我们常用的。
document这个对象是Document类型，暂且理解为Document的实例。
document.__proto__===HTMLDocument.prototype //true//就是为什说暂且理解为Document的实例，因为测试false，还有就是不常用Document。所以暂且哦。document.__proto__ === Document.prototype //falsewindow这个对象是Window类型，理解为就是Window的实例
//这里为true，所以就是Window的实例window.__proto__ === Window.prototype //true来图来图来图：
可能可爱的小伙伴还会问：那JavaScript对象（本地对象，内置对象）、宿主对象、全局对象都是啥？
1.内置对象:浏览器自带的吧，哈哈哈。包括Global和Math
2.本地对象：就是Function、Array、Object等这些类对象。哈哈哈本地对象包括上面提到的内置对象。
3.宿主环境：比如就是浏览器。包括BOM对象和DOM对象。
4.全局对象：在全局下，我们平时var a={}等，默认挂在window上的对象。或者new Bar()对象（或者叫自定义对象吧）。
其实吧，大概说一下这样理解就够了：1,2,3这样理解浏览器自带的。4更多理解为自定义的哈。
那还有更可爱的小伙伴如果还想知道更多，可以网上的博客https://www.jianshu.com/p/a52e6e183427