DOM 和 BOM

DOM 和  BOM

DOM：

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

1. 1.  DOM的来源：

DOM，是W3C组织推荐的处理可扩展标志语言的标准编程接口。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

1. 2.  DOM的方法及其应用：

方法是我们可以在节点（HTML 元素）上执行的动作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

BOM：

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

主要功能

1. 弹出新浏览器窗口的能力；

2. 移动、关闭和更改浏览器窗口大小的能力；

3. 可提供WEB浏览器详细信息的导航对象；

4.可提供浏览器载入页面详细信息的本地对象；

5 .可提供用户屏幕分辨率详细信息的屏幕对象；

6. 支持Cookies；

7. Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。

由于BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式。BOM有窗口对象、导航对象等一些实际上已经默认的标准，但对于这些对象和其它一些对象，每个浏览器都定义了自己的属性和方式。

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

alert()   显示带有一段消息和确认按钮的警告框

prompt() 显示可提示用户的对话框

comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

open()    打开一个新的浏览器窗口或查找一个已命名的窗口

close()   关闭浏览器窗口

print()   打印当前窗口内容

focus()   把键盘焦点给予一个窗口

blur()    把键盘焦从顶层窗口移开

moveBy() 可相对窗口的当前坐标把他移动指定的像素

moveTo() 把窗口的左上角移动到一个指定的坐标

resizeBo()    按照指定的像素调整窗口大小

resizeTo()    把窗口的大小调整到指定的高度和宽度

scrollBy()    按照指定的像素来滚动内容

scrollTo()    把内容滚动到指定的坐标

setInterval()    每隔指定的时间执行代码

setTimeout() 在指定的延迟时间之后来执行代码

clearInterval() 取消setInterval()的设置

clearTimeout()   取消setTimeout()的设置