【JavaScript】BOM和DOM

在第一篇JavaScript视频总结博客中，是对JavaScript做了一个宏观的认识。其中，不知道大家可否还记得，JavaScript的核心部分包括哪些？JavaScript的核心部分主要包括三个：1.ECMAScript，如果想更多了解它，不妨看看百度。2.BOM（Browser Object Model）（浏览器对象模型）3.DOM（Document Object Model ）（文本对象模型）本篇博客主要是对后面两个核心部分做个简单总结，两者看起来相似，其实有着完全不一样的作用。一.BOM浏览器对象模型，提供了很多对象，用于访问浏览器的功能。它缺少规范，每个浏览器都有各自不同的功能或是想法，但浏览器之间还是少不了一些共有的对象。下面就介绍三个共有的对象：window、location和history。1.window对象

BOM的核心对象是window，它表示浏览器的一个实例。视频中，主要给我们介绍的就是以上4个用法。另外，window对象还包含很多属性和方法，了解一些常用的也就够了。特别地，window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。如：window.alert()和alert()是一个意思。2.location对象location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。下面是其常用的一些方法和属性的列举：

3.history对象history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。

对BOM有了清晰的认识后，下面我们继续对DOM做一个总结，最后对比对比，它们之间有没有什么联系。二.DOM文档对象模型，描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。我们在浏览器中所看到的一个个HTML页面，实际上它的背后是一个个文档，由头部，标题，身体等结构组成。在DOM中，我们把各个组成部分都称作“节点”，下面就是一个完整的节点树：

而对应着节点树背后的DOM，我们也不陌生了：

对DOM有了一个整体上的感知后，我们再看看其中关于节点的细节知识：

以上的这些知识，也不需要我们去记，在用的过程中我们自然而然就会熟练掌握的。像之前做的项目中，经常用到getElementById()的方法，所以现在看也是感觉特别亲切。三.BOM和DOM通过上面的学习总结，还是不难发现BOM和DOM之间有着差别：1.BOM缺乏标准，DOM的标准是W3C。2.BOM和浏览器关系密切，DOM和HTML或XML文档关系密切。3.BOM的根本对象是window对象，DOM的根本对象是document对象。从网上查找了一些相关资料阅读，很多地方都说它们两个之间其实没有什么关系，而自己觉得它们间的联系还是很紧密的。之前也说了，我们所看到的一个个页面，它的背后其实都包含着一行行的DOM文档代码，所以说，我觉得DOM的根本对象其实就是BOM的根本对象的子对象，也是其一个属性。详见下图：

四.学习感受最初，自己原本想讲BOM和DOM的知识分开写成两篇博客，因为看视频的时候，也没发现它们两者之间有着任何关联。但开始写了，开始自己总结的过程的时候，就发现它们两个之间也是可以建立一定联系的。与其分开总结，不如多一些思考，多一些查找，多一些联系，把它们放在一起学习。