document元素相关笔记

document 和 document.documentElement

当html页面第一行没有声明标签 !DOCTYPE html 的时候，document和document.documentElement是一样一样的。如图， 在浏览器打印这两个元素的时候选中后的都是同一个区域

而当也页面添加了!DOCTYPE html 之后再打印这两个元素的时候，document没变，document.documentElement元素选择区域变短为整个页面所占的高度。

DOCTYPE
当页面具有DTD的时候，使用 document.documentElement。页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

document.scrollTop

scrollTop意为垂直滚动条滚动过的距离，指的是“元素中的内容”超出“元素上边界”的那部分的高度。
为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

scrollTop解释

client

clientTop: 当前元素上边框的高度 （border-top）
clientLeft: 当前元素左边框的宽度 (border-left)
clientWidth: 当前元素宽度 (padding + content, 不包含border)
clientHeight: 当前元素高度 (padding + content, 不包含border)
参考链接

scroll

scrollTop: 当前元素<垂直滚动条>滚动过的距离
scrollLeft: 当前元素<水平滚动条>滚动过的距离
scrollWidth: 当前元素滚动宽度（不包括边框）
scrollHeight: 当前元素滚动高度 （不包括边框）
scrollWidth和scrollWidth有浏览器兼容性

offset

offsetTop: 当前元素离设置了定位的父元素的顶部的距离
offsetLeft: 当前元素离设置了定位的父元素的左边的距离
假如没有定位的父元素，则相对与根元素html