js笔记·····BOM(brower object model)

                               BOM

一 什么是BOM?

BOM(brower object model),浏览器对象模型，用来模拟浏览器。

二 BOM的作用？

BOM是浏览器对象模型，提供了一系列的API(方法)开放给编程语言，使编程语言(javascript,jscript,vbscript等)可以操作浏览器。比如我们的浏览器是电视机，那BOM就相当于电视机的遥控器，要想控制电视机，需要用到遥控器；要想控制浏览器需要用到BOM。BOM建立了浏览器和编程语言的联系，是浏览器和编程语言的桥梁。

三 BOM的组成部分？

   BOM由一个主对象window和6个子对象组成。

   子对象

   1 document 文档对象，提供了操作文档的属性

   2 frames    框架对象  frameset  frame  iframe

   3 location   浏览器地址对象，就是对网页的url进行操作

   4 navigator  浏览器信息对象，包含浏览器的各种信息，如浏览器的品牌，版本，是否在线，是否支持cookie等等

   5history    历史记录对象。可以对历史记录进行操作

   6screen     屏幕对象。获取当前屏幕的信息。

四 window对象？

    浏览器提供了一个js执行的环境，所以浏览器就是js的宿主环境。

window对象可以从两个层面上理解

1 在js层面，window就是一个最大的全局对象。所有的内容都要挂靠在这个对象之下，包括声明的变量、函数、对象。

2 在浏览器，window就是浏览器，浏览器提供的一系列的功能，也必须通过window来调用。

五  需要理解的几个关键字

this    window   self   parent   ‘ ’  这五个关键字，如果是顶级窗口的话，都表示当前窗口的意思

六  window对象提供的属性和方法？

  获取屏幕的宽度  screen.width

  获取屏幕的高度  screen.height;

  获取屏幕的可用宽度  screen.availWidth

  获取屏幕的可用高度  screen.availHeight;

 

1 浏览器距离屏幕左上角的水平垂直距离

   对IE和谷歌浏览器，获取距离屏幕左上角距离使用的属性是screenLeft\screenTop

      console.log('浏览器距离屏幕左上角的水平距离'+window.screenLeft);

      console.log('浏览器距离屏幕左上角的垂直距离'+window.screenTop);

   对火狐和谷歌浏览器，获取距离屏幕左上角距离使用的属性是 screenX  screenY

      console.log('浏览器距离屏幕左上角的水平距离'+window.screenX);

      console.log('浏览器距离屏幕左上角的垂直距离'+window.screenY);

         

     解决兼容性，left值如果支持window.screenLeft，就去window.screenLeft值赋值给left,如果支持window.screenX属性，就将window.screenX值赋值给left

     var l =     window.screenLeft || window.screenX;

     var t =      window.screenTop || window.screenY;

         

   对所有浏览器有效

   console.log('浏览器距离屏幕左上角的水平距离'+l);

   console.log('浏览器距离屏幕左上角的垂直距离'+t);

2 跟大小相关的属性和方法

  1） 获取浏览器的外宽高

      console.log('当前浏览器的宽度是'+window.outerWidth);

      console.log('当前浏览器的高度是'+window.outerHeight);

  2） 获取浏览器的视窗区域的宽高

      console.log('当前浏览器视窗的宽度是'+window.innerWidth);

      console.log('当前浏览器视窗的高度是'+window.innerHeight);

         

      console.log('当前文档的宽度是'+window.document.documentElement.clientWidth);

      console.log('当前文档的高度是'+window.document.documentElement.clientHeight);

       

      console.log('当前文档的宽度是'+window.document.body.clientWidth);

      console.log('当前文档的高度是'+window.document.body.clientHeight);  

 3  获取文档高度

      console.log('当前文档的宽度是'+window.document.documentElement.scrollWidth);

      console.log('当前文档的高度是'+window.document.documentElement.scrollHeight);         

      console.log('当前文档的宽度是'+window.document.body.scrollWidth);

      console.log('当前文档的高度是'+window.document.body.scrollHeight);

      兼容性获取视窗宽度高度

         documentElement 等价于html  body等价于body

         var doc_w =    window.document.documentElement.scrollWidth || window.document.body.scrollWidth;

         var doc_h =    window.document.documentElement.scrollHeight || window.document.body.scrollHeight;

 4 获取当前文档向下滚动的距离和向右滚动的距离

     文档向下滚动的距离'+window.document.body.scrollTop  

     文档向右滚动的距离'+window.document.body.scrollLeft

 

 5 改变浏览器大小的方法，此方法只对IE浏览器生效，但对谷歌和火狐弹出的窗口有效

   resizeTo(水平方向改变到，垂直方向改变到)跟原来的值没有关系

   resizeBy(水平方向在当前值基础上改变多少，垂直方向上在当前值基础上改变多少)

   在原来值的基础上改变

 6 移动浏览器的方法，同改变方法一样，也是只有IE生效，如果采用其他浏览器，必须是弹出的窗口才有效

   moveTo(水平方向上移动到的坐标,垂直方向上移动到的坐标)

   moveBy(水平方向上移动了多少,垂直方向上移动了多少)

 7 打开新窗口和关闭窗口

   打开 window.open()

   关闭 window.close();