优雅的JavaScript-BOM详解

BOM

1.定义：浏览器对象模型，使JavaScript有能力与浏览器“对话”，浏览器对象模型尚无正式标准。
     window对象是BOM中所有对象的核心，所有的浏览器都支持window对象，表示浏览器的窗口
     JavaScript中任何一个全局函数，变量都是window的属性，document是window的实例对象，他们都属于Object，你不可以去Newt他
     必须直接调用他的方法和属性
     
     在浏览器中，window对象既是JavaScript访问浏览器窗口的一个接口，同时也是ECMAScript规定的Global对象
     理解成，在网页中任何的变量、函数、对象都是以window作为Global对象。在全局作用域中声明的对象、函数、变量，都会变成window的属性和方法
     
              window
            
   document   frames  history  screch
     |
     |
 forms   images  Links  location
如何操作浏览器，通过window对象
​
​

1.window和document的关系:document是window的子对象
2.location对象：
   href属性：控制浏览器地址栏的内容
   reload()方法：刷新页面
   reload(true):刷新页面，不使用缓存
3.history对象：用户在浏览器窗口中访问过的URL
    back:上一个
    forword：下一个
    go(num)//num<0:跳转到自己后方的第num个记录
            num>0:跳转到自己前方的第num记录
4.获取历史记录的长度
window.history.length

window中常用的事件

1.加载：onload：当页面加载完成时会触发改事件
2.卸载：onUnload：当页面卸载完成时会触发改事件
3.滚动事件：onscroll：当窗口发生滚动会触发该事件
 
 
 如何获取滚动条滚动的多少
  //滚动距离
 document.body.scrollTop
document.documentElement.scrollTop
4.窗口变化事件：onresize:当窗口的大小发生变化会触发改事件
如何获取窗口的大小
document.documentElement.clientWidth
window.innerWidth
document.body.clientWidth

window中常用的方法

1.打开普通的窗口：open（）
可以导航到一个特定的URL，也可以打开一个新窗口
open（URL，target，“特性的字符串”）：特性字符串表示新窗口中有哪些特性，特性之间用“，”隔开
2.关闭窗口
  close();
  window.close():注意：关闭窗口，不能关闭非脚本打开的窗口
3.模态弹出框：alert
4.关于定时器的方法：
   连续定时：setInterval,clearInterval
   延迟定时：setTimeout,clearTimeout
   
   属性 
   scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
   scrollLeft：设置或获取位于对象最左边界和窗口中可见内容的最最左端之间的距离
   clientWidth：浏览器可见内容的高度，不包括滚动条等边线，会随着窗口的显示大小改变
   clientHeight：获取浏览器中可以看到内容区域的高度
   offsetWidth：可以获取元素的宽度，宽度值包括：元素内容+内边距+边框，不包括外边距和滚动条部分，返回值是一个整数，单位是像素，此属性是只读
   offsetHeight：获取元素的高度