JavaScript - BOM和常用操作

BOM - Browser Object Model 浏览器对象模型

提供了一整套操作浏览器相关内容的属性和方法

• 特点
  操作的都是和浏览器这个软件本身相关的内容(滚动条，地址栏，标签页，弹窗，…)
  所有的BOM相关操作，在各个浏览器表现形式不一样
  BOM操作一般都是window.xxx，书写的时候可以省略window不写

浏览器可视窗口大小

语法：

window.innerWidth
window.innerHeight

注意：获取的是包含滚动条在内的尺寸( Mac 除外)

浏览器的弹出层

• 提示框
  语法：

window.alert(提示文本内容)

表现：一个弹框 + 提示文本 + 确定按钮
返回值：没有

• 确认框
  语法：

window.confirm(提示文本内容)

表现：在alert的基础上+取消按钮
返回值：一个布尔值 确定=true 取消=false

• 输入框
  语法：

window.prompt(提示文本内容)

表现：在confirm的基础上+输入框
返回值：如果点击确定，就是输入的内容(必然是一个字符串类型)
如果点击取消，就是null

• 三个弹出层的共同点
  都会阻断浏览器页面渲染的继续执行
  都会阻断WEBAPI的工作内容(分析代码)

浏览器的标签页

window.open(地址)

作用打开新的标签页，开启地址

window.close()

关闭当前标签页

浏览器隐藏的尺寸(浏览器滚动条定位)

• 隐藏的高度
  语法：

documnet.documentElement.scrollTop

->有DOCTYPE标签的时候能获取到尺寸

document.body.scrollTop

->没有DOCTYPE标签的时候，能获取到尺寸

使用 || 的短路运算：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

• 隐藏的宽度
  语法：

document.documentElement.scrollLeft

->有DOCTYPE标签的时候，能获取到尺寸

document.body.scrollLeft

-> 没有 DOCTYPE 标签的时候, 能获取到尺寸

使用 || 的短路运算

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

浏览器的常见事件

• load
  加载事件
  时机：当页面所有外部资源(html，css，js，图片，视音频等)全部加在完毕后出发
  一般:
  -> 当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素需要加一个 window.onload 事件
  => 注意:
  -> 因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数
  -> 如果写了两个事件处理函数, 那么只能执行后面一个

• resize
  尺寸改变事件
  时机：当页面可视窗口尺寸改变的时候触发，随时改变随时触发

• scroll
  滚动事件
  时机：当页面滚动条滚的的时候触发，随时改变随时触发

• 浏览器滚动到
  语法：window.scrollTo()
  两种参数方式
  1、 window.scrollTo(x, y)
  -> x 表示横向位置
  -> y 表示纵向位置
  注意：必须传递两个参数，一个会报错
  特点：只能瞬间定位，不能平滑滚动
  2、 传递对象
  window.scrollTo({
  top: yyy,
  left: xxx,
  behavior: ‘smooth’
  })
  默认是瞬间定位秒，需要一个 key 叫做 behavior 来决定是平滑滚动