1.认识BOM

• BOM:浏览器对象模型,其实就是操作浏览器的一些能力
• 例如:
  • 获取浏览器的相关信息(窗口大小)
  • 操作浏览器进行页面的跳转
  • 获取浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 获取浏览器的版本
  • 让浏览器出现一个弹出框
  • ....
• BOM的核心就是 window 对象, window 就是 JS 内置的一个对象,里面包含着操作浏览器的方法

2.BOM的一些属性及常用方法

2.1获取浏览器的地址

• localtion
  • window.localtion //获取当前浏览器地址栏内 url 地址的信息
  • window.localtion.href = ''//给 href 属性赋值,会跳转到赋值的地址
  • window.localtion.reload()//这个方法调用时会重新加载页面,相当于刷新

2.2获取浏览器的尺寸

• innerHeight
  • 获取浏览器的高度(包含滚动条)
• innerWidth
  • 获取浏览器的宽度(包含滚动条)

2.3浏览器的弹出窗口

• alert
  • 语法: alert('') //弹出窗口显示括号内的内容,且只有一个确定按钮
• prompt
  • 语法: prompt('') //弹出窗口显示括号内的内容,且有一个用户可输入的内容框,有确定和取消两个按钮
  • 返回值:用户输入的内容
• confirm
  • 语法:confirm('') //弹出窗口显示括号内的内容,有确定和取消两个按钮

2.4浏览器的历史记录

• history.back
  • 语法:window.history.back()
  • 作用:用来回到前一个页面
  • 注意:必须有前一条记录,否则不可使用此方法
• history.forward
  • 语法:window.history.forward()
  • 作用:用来回到下一个页面
  • 注意:之前必须有回退操作,否则不可使用此方法

2.5浏览器的滚动事件

• scrollTop
  • 语法1:document.body.scrollTop
  • 语法2:document.documentElementt.scrollTop
  • 作用:获取页面向上滚动的距离
• scrollLeft
  • 语法1:document.body.scrollLeft
  • 语法2:document.documentElementt.scrollLeft
  • 作用:获取页面向左滚动的距离
• 区别:
  • IE浏览器:
    • 没有 DOCTYPE 声明的时候, 两种语法没有差别用哪个都无所谓
    • 有 DOCTYPE 声明的时候, 只能使用语法2 documentElement
  • Chorm 和 FireFox
    • 没有 DOCTYPE 声明的时候, 用 语法1 body
    • 有 DOCTYPE 声明的时候, 用 语法2 documentElement
  • Safari
    • 这两个语法都不用, 使用一个单独的方法 window.pageYOffset