终于分清了DOM和BOMI. 何为DOM，何为BOM？ JavaScript = ECMAscript + BOM +

I. 何为DOM，何为BOM？

JavaScript = ECMAscript + BOM + DOM

下面我们来一个一个对它们进行一个概述：

ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言，它是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。

ECMAscript更像一个规定，规定了各个浏览器怎么样去执行JavaScript的语法，因为我们知道JavaScript是运行在浏览器上的脚本语言！有了规定，但是我们还缺少与页面中各个元素交互的方式，此时下面的DOM诞生了！

DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。

对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。

一句话概括：DOM为JavaScript提供了一种访问和操作HTML元素的"方法"(之所以不用接口这个词，是怕一些朋友看到接口就发怵的情况，但其实最准确的描述是给JavaScript提供了接口)

BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。

对于JavaScript：为了能够让JavaScript能控制浏览器的行为，JavaScript就有了一套自己的BOM接口。

一句话概括：BOM为JavaScript提供了一种控制浏览器行为的"方法"。

最后，上面的三个JavaScript的组成成分中，ECMscript是一种规范，而其余的两个都是提供了"方法"，分别对应HTML元素和浏览器，于是下面我们针对后面两个：DOM和BOM，进行系统的讲解，由于面向小白，我后面的讲解会尽可能的简单易懂，基础不好也尽可放心食用！

//1.通过元素的id属性值来获取元素，返回的是一个元素对象 var element = document.getElementById(id_content)

//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组 var element_list = document.getElementsByName(name_content)

//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组 var element_list = document.getElementsByClassName(class_content)

//4.通过标签名获取元素，返回的是一个元素对象数组 var element_list = document.getElementsByTagName(tagName)

BOM给JavaScript提供用来操作浏览器的若干的"方法"

那么首先我们用一张图把整个BOM的结构给大家梳理一下，与DOM类似，BOM也有一个树状结构：

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

(1) window.属性 / window.方法()

(2) 直接属性 / 方法() 的方式调用

location对象是window对象的一个属性，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location对象有以下常见的属性和方法：

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

history对象有以下常见的属性和方法：

属性/方法描述 length history 对象中的记录数 back() 前往浏览器历史条目前一个 URL，类似后退 forward() 前往浏览器历史条目下一个 URL，类似前进 go(num) 浏览器在 history 对象中向前或向后

navigator对象，是BOM中识别客户端浏览器的一个window属性。

navigator相关的一些常见属性：