document.documentElement與document.body的區(qū)別

document.body 是 DOM 中 Document 對(duì)象里的 body 節(jié)點(diǎn)
document.documentElement 是文檔對(duì)象根節(jié)點(diǎn)(html)的引用

IE 在怪異模型（quick mode）下document.documentElement無(wú)法正確取到clietHeight、scrollHeight等值，比如clietHeight=0。可以見(jiàn)IE的怪異模型并沒(méi)有把html作為盒子模型的一部分，好在現(xiàn)在很少使用怪異模型。（注：不過(guò)在實(shí)測(cè)中，可以理解為document.documentElement可以理解為瀏覽器的可見(jiàn)窗口區(qū)域，而body則僅為內(nèi)容區(qū)域。我們這里獲取常見(jiàn)的三個(gè)值（scrollWidth、offsetWidth和clientwidth）來(lái)比較一下：

document.documentElement.scrollWidth 返回整個(gè)文檔的寬度
document.documentElement.offsetWidth 返回整個(gè)文檔的可見(jiàn)寬度
document.documentElement.clientwidth 返回整個(gè)文檔的可見(jiàn)寬度（不包含邊框 clientwidth = offsetWidth - borderWidth）

不過(guò)一般來(lái)說(shuō)，我們不會(huì)給document.documentElement來(lái)設(shè)置邊框，所以這里的 clientwidth 與 offsetWidth 一致。

document.body.scrollWidth返回body的寬度
這里的scrollWidth有個(gè)不一致的地方，基于 webkit 的瀏覽器（Chrome和Safari）返回的是整個(gè)文檔的寬度，也就是和 document.documentElement.scrollWidth 一致，opera 和 FF 返回的就是標(biāo)準(zhǔn)的 body 的 scrollWidth 個(gè)人覺(jué)得 opera 和 FF 算是比較合理的。

document.body.offsetWidth返回body的offsetWidth

document.body.clientWidth 返回body的clientWidth（不包含邊框），clientWidth = offsetWidth - borderWidth前面的例子，會(huì)發(fā)現(xiàn)body和documentElement的有些值是相等的，這并不是表示他們是等同的。而是因?yàn)楫?dāng)我們沒(méi)有給body設(shè)置寬度的時(shí)候，document.body默認(rèn)占滿整個(gè)窗口寬度，于是就有：

document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientWidth = document.documentElement.clientWidth - document.body.borderWidth（body的邊框?qū)挾龋?/pre>

當(dāng)我們給body設(shè)置了一個(gè)寬度的時(shí)候，區(qū)別就出來(lái)了。

為什么offsetWidth始終比clientWidth大呢？

原因就在于這個(gè)“邊線”。在FF1.06+和IE6.0+上，有這樣的區(qū)別：

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

當(dāng)然，如果出現(xiàn)的滾動(dòng)條，offsetWidth也會(huì)包含滾動(dòng)條的寬度，而clientWidth是不包含滾動(dòng)條的寬度的。

IE9/IE8

這兩個(gè)差不多，唯一的區(qū)別是IE9包含window.innerWidth屬性，而IE8不包含window.innerWidth屬性。

1、document.documentElement.scrollWidth返回整個(gè)文檔的寬度，和FF等瀏覽器一致

2、document.documentElement.offsetWidth返回整個(gè)文檔的可見(jiàn)寬度（包含滾動(dòng)條，值和innerWidth一致），注意，這里和FF等瀏覽器又有點(diǎn)區(qū)別。

3、document.documentElement.clientwidth返回整個(gè)文檔的可見(jiàn)寬度（不包含邊框），和FF等瀏覽器一致。clientwidth = offsetWidth - 滾動(dòng)條寬度document.body.scrollWidth返回body的寬度。

注意，這里的scrollWidth和FF等瀏覽器有點(diǎn)區(qū)別，這里并不包括body本身的border寬度。因此例子中，相比FF少了10px。

document.body.offsetWidth返回body的offsetWidth，和FF等瀏覽器一致，document.body.clientwidth返回body的clientwidth（不包含邊框），和FF等瀏覽器一致，clientwidth = offsetWidth – borderWidth。

IE7與IE9/IE8的主要區(qū)別是

1、document.documentElement.offsetWidth的返回值不一樣，

參見(jiàn)上面說(shuō)的，IE9/IE8的document.documentElement.offsetWidth包含滾動(dòng)條，但是IE7的document.documentElement.offsetWidth不包含滾動(dòng)條。

2、document.documentElement.scrollWidth返回整個(gè)文檔的寬度，注意，這里和IE9/IE8、FF等瀏覽器又有不一致，對(duì)于IE9/IE8、FF等瀏覽器，scrollWidth最小不會(huì)小于窗口的寬度，但是在IE下沒(méi)有這個(gè)限制，文檔有多小，這個(gè)就有多小,其他倒是挺一致的。

IE6

IE6的document.documentElement返回值與IE9/IE8沒(méi)有區(qū)別（由此可見(jiàn)，對(duì)于document.documentElement，IE7就是個(gè)奇葩）。

話說(shuō)回來(lái)，IE的document.body就是個(gè)奇葩，當(dāng)沒(méi)有給body設(shè)置寬度的時(shí)候，body是默認(rèn)占滿整個(gè)文檔的（注意，其他的瀏覽器都是占滿整個(gè)窗口），當(dāng)然，最小值是整個(gè)窗口的大小，就是說(shuō)body指向了根元素。

因此，在算上IE6在解析width方面的bug，和其他的瀏覽器的區(qū)別就淋漓盡致了。

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

另外，有一點(diǎn)和IE7同樣，就是document.documentElement.scrollWidth沒(méi)有最小寬度限制。