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

Question

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 的位置。