BOM 浏览器对象模型

DOM：(Document Object Model) 文档对象模型。BOM：(Browser Object Mode) 浏览器对象模型;

从以上字面意思可以看出，两者最大的区别在于D B的区别。

DOM的根节点是document。经常编写JavaScript代码，也许你会想到window对象，为啥DOM里面没有window，这就是BOM与DOM的区别了，window是JavaScript的顶端对象之一，它是隶属于浏览器层次的，它独立于文档内容与浏览器之间。

BOM没有正式的标准。

 

作用：1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；

 

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

      3. 提供装载到浏览器中页面的详细信息的定位对象；

  4. 提供用户屏幕分辩率详细信息的屏幕对象；

  5. 对cookie的支持。

 

基本的BOM体系结构：

window

document

anchors

forms

images

links

location

fremes

history

location

navigator

screen

window对象：

1. 窗口操作：

moveBy(x,y)：把浏览器窗口相对当前位置水平移动x个像素，垂直移动y个像素。

moveTo(x,y)：移动浏览器窗口，使它们的左上角位于用户屏幕的（x，y）处。

resizeBy(x,y)：相对于浏览器窗口的当前大小，把它的宽度调整x个像素，高度调整y个像素。

resizeTo(x,y)：把窗口的宽度调整为x，高度调整为y。（不能为负数）

IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置。

document.body.offsetWidth和document.body.offsetHeight属性可获取视口大小。

Mozilla提供了window.screenX和window.screenY属性判断窗口的位置;

windows.innerWidth和windows.innerHeight属性来判断视口的大小;

window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

2. 导航和打开新窗口：

打开新窗口：window.open("URL","名称(自定义)","调整窗体的宽高等等");

调整窗体有：

left(窗口的左坐标,不能为负数)；top(窗口的上坐标,不能为负数)；

height(窗口的高度,不能小于100)；width（窗口的宽度,不能小于100）；

resizable(判断窗体是否能拖动,默认为no)；

scrollable(判断窗体不要显示内容时是否滚动，默认为no)；

toolbar（判断是否显示工具栏，默认为no）；

status（判断是否显示状态栏，默认为no）；

location（判断是否显示地址栏，默认为no）。

关闭自身窗体：window.close();

3. 系统对话框：

alert("hello");    //警告框

confirm("判断");     //确认框

prompt("'请输入数:")  //输入框

4. 时间间隔和暂停：

var t = setTimeout("alert(hello)",1000); //等待1秒后弹出警告框.

clearTimeout(t); //取消

var t = setInterval("alert(hello)",1000); //等待1秒后执行

clearInterval(t); //取消

5. 历史：

后退一页：window.history.go(-1); (正数为前进)

document对象：

1. document对象的一些通用属性：

i. lastModified：最后修改的日期，是字符串；

ii. Referrer：浏览器历史中后退一个位置的URL；

iii. Title：标签中显示文本；

iv. URL：当前载入的页面的URL。

如把窗口导航到新页面：document.URL = "http://www.**.com";

2. document对象的集合：

a. embeds：页面中嵌入式对象的集合；

b. forms：页面中所有表单的集合；

c. images：页面中所有图像的集合；

d. links：页面中所有超链接的集合。 

用document.links[0]访问超链接;

用document.images[0]或document.images["imgHome"]访问图像;

用document.forms[0]或document.forms["frmSubscribe"]访问表单.

location对象：

导航到新页面：

location.href = "http://www.**.com";

location.assign("http://www.**.com");

navigator对象：

appCodeName：(浏览器代码的名称字符串表示);

appName：官方浏览器字符串表示；

userAgent：检查浏览器版本。

screen对象：

avaiHeight：窗口可以使用的高度；

avaiWidth：窗口可以使用的宽度.