BOM简介

Posted 2020-12-07 macro-renzhansheng

## BOM

- BOM简介

  Browser Object Model:独立于内容，与浏览器交互的对象。核心是window对象。

  DOM[w3school规范] VS BOM[各家浏览器规范]

- window对象（定时器）

  浏览器的顶级对象

  1：js访问浏览器窗口的一个接口

  2：全局变量，定义再全局作用域种的变量或函数，会自动成为window对象的属性

- 页面加载事件

  窗口加载事件：文档内容完全加载（图片、脚本、css等）完成，触发事件。

  window.onload = function(){}

  DOMContentLoaded DOM加载完毕 不包含样式、图片、flash等

  document.addEventListener(‘DOMContentLoaded‘,function(){

      console.log(123);

  });

  //DOM0、DOM2级绑定皆可

  //1 只要窗口大小发生像素变化，会触发该事件

  //2 可以实现响应式 window.innerWidth获取当前屏幕宽度

  窗口大小事件  window.onresize = function(){

      console.log(window.innerWidth);

  };

- 定时器

  window.setTimeout(函数，延迟时间);

  clearTimeout(timeoutID);

  window.setInterval(函数，延迟时间);//clearInterval();

- location 对象/ navigator 对象/history 对象

    location对象

        通过location.href：实现网页跳转[获取或设置整个url]

        location.host:获取主机地址

        location.search:获取传的参数

        location.assign() 和 href一样

        location.replace() 替换当前页面 [特点：不能后退，因为没有记录历史]

        location.reload() 重新加载页面

    navigator对象

        navigator.userAgent

    history对象

        back()          后退

        forward()       前进

        go()            go(N):往前跳N页（N>0）   go(M):(M<0)往后跳M页

页面跳转

setTimeout(function() {

location.href = ‘http://www.baidu.com‘;

        }, 4000);