BOM-三大系列篇

1. 元素偏移量offset系列

1.1 offset概述

1. offset 翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

1.2 offset 系列常用属性

1. 获取元素距定位父元素的偏移位置，返回不带单位的值（没有定位父元素，以body为准）
   a. 水平方向：element.offsetLeft
   b. 垂直方向：element.offsetTop
2. 获取元素大小（边框盒），返回值不带单位
   a. 宽度：element.offsetWidth
   b. 高度：element.offsetHeight
3. 获取带有定位的父元素（如果没有定位父元素，返回body）
   a. 带定位父元素：element.offsetParent
   

1.3 offset 和 style 区别

1.4 放大镜案例的公式

2. 元素可视区 client 系列

2.1 client 概述

1. client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。
2. 通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

2.2 client 的相关属性

1. clientLeft 与 offsetLet 的区别在于获取到的元素大小不包含边框，但是它有获取边框大小的属性
   

3. 元素滚动 scroll 系列

3.1 scroll 概述

1. scroll 翻译过来就是滚动的，我们使用scroll系列相关的属性可以动态的得到该元素的大小、滚动距离等

3.2 scroll 的相关属性

1. scrollWidth 与 clientWidth 的区别在于，它获取到的是元素的实际大小（包含padding），比如内容溢出的部分也计算在内
   

3.3 页面被卷去的头部

1. 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，
   我们就称为页面被卷去的头部。
2. onscroll 事件，在滚动条滚动时触发 。页面滚动事件的事件源是document。
3. 页面被卷去的头部：可以通过window.pageYOffset 获得，被卷去的左侧为：window.pageXOffset （IE9以上支持）
4. 注意：元素被卷去的头部是element.scrollTop获取

3.4 滚动窗口

1. 滚动窗口至文档中特点位置：window.scroll(x, y) x、y写数值就行，不带单位

4. 三大系列总结

4.1 获取元素大小对比

1. 大小包含边框：offsetWidth
2. 不包含边框：clientWidth、scrollWidth
3. 包含溢出内容部分：scrollWidth

4.2 三大系列主要用法

1. offset 系列，经常用于获得元素位置 offsetTop、offsetLeft
2. client 系列，经常用于获得元素大小 clientWidth、clientHeight
3. scroll 系列， 经常用于获取滚动距离 scrollTop、scrollLeft