JavaScript--BOM部分

BOM

• 1. 概述

  • 浏览器对象模型，提供独立与内容而与浏览器窗口进行交互的对象，核心是window

  • 类别	标准化组织
    JavaScript	ECMA
    DOM	W3C
    BOM	Netscape浏览器标准一部分

  • BOM和DOM区别

    • BOM包含DOM

    • window对象 > document,location,navigation,screen,history

      • 1. JS访问浏览器窗口的一个接口
        2. 全局对象，包含新旧属性/方法

    • DOM	BOM
      文档对象模型	浏览器对象模型
      文档视为对象	浏览器视为对象
      顶级对象–document	顶级对象–window
      操作页面元素	浏览器窗口交互
      W3C标准	浏览器厂商自定义标准，兼容性较差

• 2. window对象常见事件

  • 事件	作用	注意
    窗口加载事件	页面内容完全加载才会触发该事件-onload	1.可将JS代码写在任意位置；2.传统注册事件只能一次，addActionListener()无限制
    	先加载DOM-DOMContentLoaded	1.图片之类页面元素太多，交互效果等待时间过长，用户体验差
    调整窗口大小事件	像素变化就触发，响应式布局-onresize	1.windows.innerWidth/height

  • /*窗口加载事件--------------------------------------------------*/
    window.onload = function(){
           
    var btn=document.querySelector('button');
    
     btn.addEventListener('click',function(){
           
        alert('Yes');
     })
     btn.addEventListener('click',function(){
           
        alert('No');
     }) 
    }
    
    /* load等页面内容全部加载完毕，包含页面DOM元素 图片 flash css等   */ 
    window.addEventListener('load',function(){
           
        alert('windows');
    })
    /* DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css等就可执行，
    加载速度比load更快 */ 
    document.addEventListener('DOMContentLoaded',function(){
           
       alert('document');
    })  
    /*窗口加载事件-------------------------------------------------*/
    

• 3. 定时器

  • 定时器	停止
    setTimeout(回调函数，[延迟毫秒数])	clearTimeout（timeoutID）
    setInteval(回调函数，[间隔毫秒数])	clearInteval（timeoutID）
    设置全局变量	=null

  • /**setTimeout(回调函数，[延迟毫秒数])**/
    var btn= document.querySelector('button');
    var timer1= setTimeout(fn,2000);
    /*不推荐*/
    var timer2= setTimeout('fn()',