Javascript—DOM和DOM

@月月鸟

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

一、 JS的了解

我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
   在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

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

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

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

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

二、认识BOM

浏览器对象模型：它是能够提供一套独立的能够对浏览器进行操控的对象模型。

以面向对象的思想进行的构成，window(窗口)对象是BOM的核心对象，也是顶级对象。

window;代表浏览器的窗口 对浏览器窗口的一系列操作都封装于内

history;代表浏览器的历史记录 提供了对历史记录的相关操作

location;代表浏览器的URL地址 提供对URL地址的相关操作

document;代表浏览器的文档内容(页面主体，类似于当初的DOM解析XML得到的document(代表所有的文档节点的集合))

window方法的常用属性和方法

DOM的分类和节点关系

最核心的DOM它适合于所有的标记语言，但是因为太通用了，所以在做某种具体的标记语言操作时，可能不太方便，所以就产生了各种基于核心的扩展DOM。

• DOM-core 核心 （XML解析用的主要就是这个核心代码）

document.getElementById();
document.getElementsByTagName();

• HTML-DOM （为了解析HTML专门提供的一种封装了的DOM）

document.forms(); // 获取某个页面的所有的form表单

• CSS-DOM (为DOM提供了对样式设置的内容)
  xxxx.style.display = "none";

DOM模型中有一个很重要的概念就是DOM树，它是按照文档内的结构进行一个绘制的，将所有的内容以节点的形式表现出来，类似于一个家族树。

使用DOM数操作DOM节点

以上内容可能会有出入，仅供参考，部分出自转载，欢迎大家踊跃留言指正