"你需要尽可能的避免DOM操作"嗯！框架的文档中经常看到这句话，似乎给了我们这些前端弱鸡一个暗示，你们憋管dom了，那玩意儿不好使。脆弱如我的小前端也就屁颠屁颠的潜意识略过了DOM,那玩意儿不好使，学了没用！可事实却是，产品经常会对我们说我要各种花式交互，一分析 完了 都是dom操作，一次两次怼回去说这玩意不好做，可是次数多了咱自己脸上也挂不住，对不？再回头看看那句话似乎又在嘲讽我，我没说你不能DOM操作......
那咱们就直面问题！仔细分析下来其实怎么获取DOM还是蛮容易的（这里就不赘述），在我目前的业务经验来看这类需求的实习大部分逻辑都在 元素的位置，大小的操作；但是恰巧能做这些事的api各式各样奇奇怪怪，多了就乱入了，所以这篇文章的主题就是理清楚DOM中各种各样的位置，大小api;
getComputeStyle
- 作用： 获取dom上的样式对象(CSSStyleDeclaration);
- 使用方法： const computeStyle = window.getComputeStyle(domEle);
- computedStyle.height = boxSIzing === borderBox ? css.style.height : contentHeight (不包含滚动条)
- Tip ： a. getComputedStyle （只读）读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。而ele.style （读）内联样式也可以更改样式返回的是设置的值不是最终的值;
getBoundingClientRect
- element.c 返回 一个DomRect对象{width， height, top, bottom, left, right, x, y}
- width: 盒模型的宽度（包含边框 )
- Tip： 这个属性 主要是兼容性好 ie8一下虽然有一个top,left,多出2px的误差问题（在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，在ie8已经修复了这个bug）主要也是使用这两个属性；
- clientWidth clientHeight clientTop clientLeft
- client委托代理的意思；
- clietnHeight = contentHeight + padding + （存在滚动条？ -滚动条宽度 ： 0）
- clientWidth = 同上；
- clientLeft = borderLeft.width + (（文字从右向左边排 && 存在滚动条）？ 滚动条宽度 : 0);
- clentTop = borderTop.width；
- Tip： 设置display: none 时这四个值都是零, 返回的数值都是整数,这些属性都是只读的；
offsetTop offsetLeft offsetHeight offsetWidth
- offset: 补偿的意思；
- 它有时被称为一个元素的物理/图形的尺寸，或是一个元素的边界框（border-box）的高度。
- offsetHeight =height + padding + border; (tip: 这里是height 不是contentHeight;不包含 ::after,::before的高度值，简单来说就是从边框开始算的高度，这个属性很有用）；
- offsetWidht = 同上；
- offsetTop = 元素距离 offsetParent（几乎跟定位元素的相对定位元素一样）顶部的偏移量；
- offsetLeft = 同上
- Tip： 设置display: none 时这四个值都是零, 返回的数值都是整数,这些属性都是只读的；
scrollTop scrollLeft scrollHeight scrollWidth
- scrollHeight: 等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight 相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。 如果内部的元素 是以改为元素定位的 那么 采用 position： absolute定位的子元素 也会按照 适应视口内容所需高度的规则 来计算offsetHeight；
- scrollWidth: 同上
- scrollTop: 属性可以获取或设置一个元素的内容垂直滚动的像素数。
- scrollLeft: 同上
- scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
- Tip: 添加一条 Element.scrollTo();
