JavaScript BOM

总结了JavaScript中的浏览器对象模型BOM，对常用对象的属性和方法都举了例子，方便理解和使用

JavaScript BOM

• JavaScript组成
  • ECMAScript(JavaScript语法)
  • DOM(页面文档对象模型)
  • BOM(浏览器对象模型)
• BOM简介
  • Browser Object Model，浏览器对象模型
  • 提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
  • JS访问浏览器窗口的一个接口
• window对象的常见事件
  • 窗口加载事件
    • 当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）
    • window.onload = function(){}
      • 只能写一次，若多个则以最后一个为准
      • 例：window.onload = function(){ console.log('hello'); }
    • window.addEventListener('load',function(){});
      • 数量没有限制
  • 调整窗口大小事件
    • 调整窗口大小时触发事件
    • window.onresize = function(){}
    • window.addEventListener('resize',function(){})
      • 例：window.addEventListener('resize',function(){ console.log(window.innerWidth); });
• 定时器
  • window.setTimeout(调用函数,[延迟的毫秒数])
    • 设置一个定时器，该定时器在定时器到期后执行调用函数
    • window可以省略，延迟的毫秒数可以省略
    • 例：var t1 = setTimeout(function(){}, 2000); var t2 = setTimeout(f1, 3000);
  • window.clearTimeout(timeoutID)
    • 停止Timeout定时器
    • 例：btn.addEventListener('click' function(){ clearTimeout(timer); });
  • window.setInterval(回调函数，[间隔的毫秒数])
    • 重复调用一个函数，每隔这个时间，就调用一次
    • 例：每隔1s调用一次 var t1 = setInterval(function(){}, 1000);
  • window.clearInterval(intervalID)
    • 取消调用setInterval()建立的定时器
• JS执行队列
  • JS是单线程，同一时间只能做一件事，所有任务需要排队
  • HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程
  • 同步任务
    • 都在主线程上执行，形成一个执行栈
  • 异步任务
    • 通过回调函数实现的
    • 三种类型
      • 1.普通事件，如click、resize等
      • 2.资源加载，如load、error等
      • 3.定时器，包括setInterval、setTimeout等
  • 执行机制
    • 1.先执行同步任务
    • 2.将异步任务放入任务队列中
    • 3.同步任务执行完毕后，再依次执行任务队列中的异步任务
• history对象
  • 包含用户访问过的URL
  • 常用方法
    • history.back()
      • 后退功能
        • 例：btn.addEventListener('click', function(){ history.back(); });
    • history.forward()
      • 前进功能
    • history.go(参数)
      • 前进后退功能
      • 参数为1：前进1个页面，参数为-1：后退1个页面
• navigator对象
  • 包含有关浏览器的信息
  • 常用userAgent属性，该属性可以返回由客户机发送服务器的user-agent头部的值
• location对象
  • 用于获取或设置窗体的URL，可用于解析URL
  • 常用属性
    • location.href
      • 获取或设置整个URL
        • 例：btn.addEventListener('click', function(){ console.log(location.href); });
    • location.host
      • 返回主机(域名)
    • location.port
      • 返回端口号
    • location.pathname
      • 返回路径
    • location.search
      • 返回参数
    • location.hash
      • 返回片段 #后面内容，常见于连接 锚点
  • 常用方法
    • location.assign()
      • 和href一样，可以跳转页面，记录历史，可以后退
        • 例：btn.addEventListener('click', function(){ location.assign('http://www.baidu.com'); });
    • location.replace()
      • 替换当前页面，不记录历史，所以不能后退
    • location.reload()
      • 重新加载页面，相当于刷新，参数为ture：强制刷新