27、什么是DOM和BOM

1、DOM

DOM (Document )，简称文档对象模型。通过创建树来表示文档，描述了处理网页内容的方法和接口。用DOM API可以轻松地删除、添加和替换节点。

DOM操作举例：

1）访问节点

document.getElementById( "ID" )	通过指定的 ID 来返回元素
document.getElementByName( "name" )	获取所有name特性等于指定值的元素
document.getElementsByTagName( "p" )	使用指定的标签名返回所有的元素列表
document.documentElement	返回存在于 XML 以及 HTML 文档中的文档根节点

2）节点的操作

creatElement(element)	创建一个新的元素节点
appendChild()	在节点列表后 添加一个新的子节点
removeChild()	从一个给定元素中删除子节点

 

例如：将HTML代码分解为DOM节点层次图

HTML文档可以说由DOM节点构成的集合，DOM节点有:

元素节点	上图中、、 等都是元素节点，即标签。
文本节点	向用户展示的内容，如 ... 中的JavaScript、DOM、CSS等文本
属性节点	元素属性，如标签的链接属性href="http://www.baidu.com"

2、BOM

BOM (browser object model)，简称浏览器对象模型。描述了与浏览器进行交互的方法和接口

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

1. 弹出新的浏览器窗口
2. 移动、关闭浏览器窗口以及调整窗口大小
3. 提供 Web 浏览器详细信息的定位对象
4. 提供用户屏幕分辨率详细信息的屏幕对象
5. 对 cookie 的支持
6. IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

例如：

• window.close(); //关闭窗口
• window.alert( "message" ); //弹出一个具有OK按钮的系统消息框，显示指定的文本

3、DOM与BOM的联系和区别

1）联系

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象document。推理如下：

1. js是通过访问BOM对象来访问、控制、修改客户端(浏览器)。
2. 由于BOM的window包含了document，window对象的属性和方法是可以直接使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。
3. 因为document对象又是DOM模型的根节点，可以说BOM包含了DOM(对象)。
4. 浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

• Window对象包含属性：document、location、navigator、screen、history、frames
• Document根节点包含子节点：forms、location、anchors、images、links

2）区别

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。