1. 是什么

BOM全称为Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

2. 提供了哪些对象

2.1 navigator

navigator是挂在window上的全局属性，里面包含了当前浏览器相关的信息。其中navigator.userAgent属性比较重要，里面包含了当前设备和浏览器类型。

2.2 screen

screen也是挂在window上的全局属性，里面提供了屏幕的相关信息，其中的width和height是当前设备整个屏幕的大小，而availWidth是可用的大小，当屏幕左侧有固定的占位时会减去该部分。

其中最重要的是orientation对象下的type，即screen.orientation.type，存储的是当前屏幕是横屏还是竖屏

landscape-primary：横屏，横轴大于纵轴大小

portrait-primary：竖屏

2.3 尺寸

页面文档尺寸

  1. document.documentElement是html文档元素。
  3. document.documentElement.offsetHeight是页面文档的高度
  5. document.documentElement.offsetWidth是页面文档的宽度

屏幕尺寸

  1. screen.height;
  2. screen.width;

浏览器视口尺寸

  1. document.documentElement.clientHeight;
  2. //=== window.innerHeight
  3. document.documentElement.clientWidth;
  1. window.scrollY;
  2. //=== document.documentElement.scrollTop;
  3. //具体的div内部的滚动可用scrollTop，xxdiv.scrollTop

距离最近的定位祖先元素

  1. element.offsetParent;//距离最近的定位祖先元素
  2. element.offsetTop;
  3. element.offsetLeft;//距离最近的定位元素祖先的左侧、上侧距离

获取元素在视窗中的位置

  1. element.getBoundingClientRect();

获取元素距离页面顶部的距离

  1. element.getBoundingClientRect().top + document.body.scrollTop;

判断下方元素是否出现在视口

  1. element.getBoundingClientRect().y  < window.innerHeight?
  2. //若为true，则出现了。false则没出现

判断上方元素是否出现在视口

  1. element.getBoundingClientRect().y + element.getBoundingClientRect().height > 0?
  2. //若为true，则出现了。false则没出现

2.4 滚动

  1. widow.onscroll = ()=>{}
  2. window.scrollTo({
  3.     top:
  4.     left:
  5.     behavior:
  6. })
  7. window.scrollBy({
  8.     top:
  9.     left:
  10.     behavior:
  11. })

浏览器默认事件

上、下按键浏览器会滚动一点

空格键会滚动一屏

可用 e.preventDefault()阻止默认事件

a标签、form表单都有默认事件

默认弹窗

alert

prompt

confirm

2.5 URL编码

  1. decodeURI()
  2. decodeURIComponent()
  3. encodeURI() //不会对 : / ? & = # 编码
  4. encodeURIComponent() //• 会对 : / ? & = # 编码