几个比较难记/易混的DOM接口

[renaesop]

1. width、height、left、top系列

DOM接口涉及样式就很多样

1.1 client系列

client这个名字看起来很莫名，但是注意搜索的话还是可以找到一些端倪。

client系列来自IE的DTHML模型, IE的DHTML出现在IE4.0, IE4.0发布于1997年，也就是说client这个名字很可能跟windows 图形编程有关。经查，win32的paint接口，把整个窗口中除了边框，各种菜单、工具栏的部分就叫 client area，实际上的意思就是呈现主要内容的部分，这个是出处。

这样也就很明朗了，从window推广到每个DOM节点，除去边框和滚动条部分就叫client area了。（不过有意思的是，window反而没有client系列接口，取而代之是IE4.0时的 document.body.clientxx和IE6之后的document.documentElement.clientxx。

接口	说明
clientTop	获取border-top的值，原意是border-top和上滚动条之和，好像并不存在上滚动条，所以就等同于上边框高度
clientWidth	元素的内容与padding的宽度和，也就是w3c中的width ＋ padding
clientHeight	元素的内容与padding的高度和，也就是w3c中的width ＋ padding
clientLeft	如果direction是从左到右，那么值就是border-left，如果是从右向左（ar），那么就是左边框加上滚动条
document.documentElement. clientTop/Left	理论上说是浏览器的地址栏以下和整个文档中间的间距，不过现代浏览器看起来都取消了这个
document.documentElement .clientHeight/Width	相当于整个视口的宽高，不过现代浏览器用window.innerWidth/Height更合适

我们可以给出一个结论，client系列表达的是元素自身的内部布局。具体讲，就是对应于CSS的padding、border、width/height系列。

1.2 offset系列

值得注意的是，这个系列的接口属于HTMLElement部分，其他属于Element，也就是说SVG等是不包括这些接口的

从字面意思上看，就是偏移，既然是样式接口，那么一定有对应的CSS属性。CSS中的偏移，也就是top、left、bottom、right，并且只有当position属性不为static时才生效。

接口	说明
offsetParent	按照W3C，只有当元素没有layout-box（display:none，或者不可见元素）或者根节点或者body节点 或者position:fixed时为null，否则定为最近的position属性为非static的祖先元素，或者position 属性为static且为td、th、table的祖先元素，直到找到body，其他情况是null
offsetTop	a.body或没有layout-box的元素返回0 b.不满足a时，如果offsetParent为null返回在浏览器中的Y坐标,transform不计入 c.返回和offsetParent的距离 （元素的border顶部和offsetParent的padding顶部的距离）
offsetLeft	与offsetTop同理，只不过变成了左边缘
offsetWidth	简单粗暴地说，就是元素的左右border之间的距离
offsetTop	简单粗暴，元素左右border间距

总结一下，offset系列是元素的框在整个布局上下文中的相对位置、宽高信息。值得注意的是，float元素并没有特殊的offsetParent，因为他不是定位元素。

1.3 scroll

字面看挺好理解的，就是跟滚动相关的接口。

接口	说明
scrollTop	元素滚动距离，实际上是元素的padding顶部和border底部的距离， 如果不可滚动则为0
scrollLeft	元素的padding左边界到border右边界的距离 如果direction是rtl，那么最右是0，向左则负数增长
scrollWidth	元素内容的总宽度，包含可滚动部分
scrollHeight	元素内容总高度，包含可滚动部分

总结一下，scroll主要影响的是后代元素，scrollTop ~ height + scrollTop是子元素的可见部分。

1.4其他

getBoundingClientRect(): 从其接口名字上的构造来说，是获取 client Area的边界矩形的参数，也就是client Area ＋ bounding，最终获取到的也就是该边界相对浏览器视口左上角的坐标，注意返回值是浮点数。更深一步说，这个是绘制时rect的位置。