笔记：BOM和DOM的区别

转载之 http://www.2cto.com/kf/201212/177335.html

BOM

 

1.  BOM是Browser Object Model的缩写，即 浏览器对象模型。

 

2.  BOM没有相关标准。

 

3.  BOM的最根本对象是window。

 

 

 

从1可以看出来：BOM和浏览器关系密切。浏览器的很多东西可以通过 JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是BOM。

 

从2可以看出来：由于没有标准，不同的浏览器实现同一功能，可以需要不同的实现方式。对于上面说的功能，不同的浏览器的实现功能所需要的 JavaScript代码可能不相同。

 

例如加入收藏夹这么一个功能：

IE浏览器: window.external.AddFavorite(url,title);

 

FireFox浏览器: window.sidebar.addPanel(title, url, "");

 

所以在写这一块的JavaScript代码时，就要考虑浏览器兼容性了。

 

虽然BOM没有一套标准，但是各个浏览器的常用功能的JavaScript代码还是大同小异的，对于常用的功能实际上已经有默认的标准了。所以不用过于担心浏览器兼容问题，不是每个浏览器都有自己的BOM，也不需要为每个浏览器都学习一套BOM，只是个别浏览器会有新增的功能会在BOM上体现出来。

 

 

 

DOM

 

1.      DOM是Document Object Model的缩写，即文档对象模型。

 

2.      DOM是W3C的标准。

 

3.      DOM最根本对象是document（实际上是window.document）。

w3c上面的定义：  HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

从1可以看出来：DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关，它关注的是网页本身的内容。由于和浏览器关系不大，所以标准就好定了。

 

既然有标准了，大家就要按标准来了，不按标准来的浏览器就要打屁股了。

 

那么JavaScript的DOM是干什么的呢？

 

我们知道HTML是由标签组成的，标签套标签。JavaScript可以通过DOM获取到底有哪些标签，标签里面的属性是什么，内容是什么等等…

 

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