jquery源码解析(第3章元素之一些常见的细节)

document.documentElement与document.body的区别

document.body 是 DOM 中 Document 对象里的 body 节点
document.documentElement 是文档对象根节点(html)的引用

IE 在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight、scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。（注：不过在实测中，可以理解为document.documentElement可以理解为浏览器的可见窗口区域，而body则仅为内容区域。我们这里获取常见的三个值（scrollWidth、offsetWidth和clientwidth）来比较一下：

document.documentElement.scrollWidth 返回整个文档的宽度
document.documentElement.offsetWidth 返回整个文档的可见宽度
document.documentElement.clientwidth 返回整个文档的可见宽度（不包含边框 clientwidth = offsetWidth - borderWidth）

不过一般来说，我们不会给document.documentElement来设置边框，所以这里的 clientwidth 与 offsetWidth 一致。

document.body.scrollWidth返回body的宽度

这里的scrollWidth有个不一致的地方，基于 webkit 的浏览器（Chrome和Safari）返回的是整个文档的宽度，也就是和 document.documentElement.scrollWidth 一致，opera 和 FF 返回的就是标准的 body 的 scrollWidth 个人觉得 opera 和 FF 算是比较合理的。

document.body.offsetWidth返回body的offsetWidth

document.body.clientWidth 返回body的clientWidth（不包含边框），clientWidth = offsetWidth - borderWidth前面的例子，会发现body和documentElement的有些值是相等的，这并不是表示他们是等同的。而是因为当我们没有给body设置宽度的时候，document.body默认占满整个窗口宽度，于是就有：

document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientWidth = document.documentElement.clientWidth - document.body.borderWidth（body的边框宽度）

当我们给body设置了一个宽度的时候，区别就出来了。

为什么offsetWidth始终比clientWidth大呢？

原因就在于这个“边线”。在FF1.06+和IE6.0+上，有这样的区别：

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

当然，如果出现的滚动条，offsetWidth也会包含滚动条的宽度，而clientWidth是不包含滚动条的宽度的。

IE9/IE8

这两个差不多，唯一的区别是IE9包含window.innerWidth属性，而IE8不包含window.innerWidth属性。
1、document.documentElement.scrollWidth返回整个文档的宽度，和FF等浏览器一致
2、document.documentElement.offsetWidth返回整个文档的可见宽度（包含滚动条，值和innerWidth一致），注意，这里和FF等浏览器又有点区别。
3、document.documentElement.clientwidth返回整个文档的可见宽度（不包含边框），和FF等浏览器一致。clientwidth = offsetWidth - 滚动条宽度document.body.scrollWidth返回body的宽度。

注意，这里的scrollWidth和FF等浏览器有点区别，这里并不包括body本身的border宽度。因此例子中，相比FF少了10px。
document.body.offsetWidth返回body的offsetWidth，和FF等浏览器一致，document.body.clientwidth返回body的clientwidth（不包含边框），和FF等浏览器一致，clientwidth = offsetWidth – borderWidth。

IE7与IE9/IE8的主要区别是
1、document.documentElement.offsetWidth的返回值不一样，
参见上面说的，IE9/IE8的document.documentElement.offsetWidth包含滚动条，但是IE7的document.documentElement.offsetWidth不包含滚动条。
2、document.documentElement.scrollWidth返回整个文档的宽度，注意，这里和IE9/IE8、FF等浏览器又有不一致，对于IE9/IE8、FF等浏览器，scrollWidth最小不会小于窗口的宽度，但是在IE下没有这个限制，文档有多小，这个就有多小,其他倒是挺一致的。

IE6
IE6的document.documentElement返回值与IE9/IE8没有区别（由此可见，对于document.documentElement，IE7就是个奇葩）。
话说回来，IE的document.body就是个奇葩，当没有给body设置宽度的时候，body是默认占满整个文档的（注意，其他的浏览器都是占满整个窗口），当然，最小值是整个窗口的大小，就是说body指向了根元素。
因此，在算上IE6在解析width方面的bug，和其他的浏览器的区别就淋漓尽致了。
1、document.body.scrollWidth返回body的宽度，和IE9/IE8/IE7一致，
2、document.body.offsetWidth返回body的offsetWidth，注意，由于body的不同，这里的offsetWidth = scrollWidth + borderWidth
3、document.body.clientwidth返回body的clientwidth（不包含边框）clientwidth = offsetWidth - borderWidth
另外，有一点和IE7同样，就是document.documentElement.scrollWidth没有最小宽度限制。