document.body和document.documentElement的比较

最新推荐文章于 2021-08-11 17:43:57 发布

techlgwjda

最新推荐文章于 2021-08-11 17:43:57 发布

阅读量701

点赞数

分类专栏： Java web开发文章标签： document.body documentElement document

Java web开发专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了在DOM中document.body与document.documentElement的区别，包括它们在不同浏览器下的表现差异，尤其是在IE怪异模式下的特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ocument.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。
IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。（注：如果页面没写DTD或写的不对，IE6默认使用怪异模型解析页面）

document.body.scrollHeight和document.documentElement.scrollHeight的区别：

    document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度，且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
     IE : document.documentElement.scrollHeight =document.body.scrollHeight + marginTop bottom高度 + 上下border宽度
     firefox :document.documentElement.scrollHeight = document.body.scrollHeight + marginTopbottom高度

这是DOMDocument对象里的body子节点和整个节点树的根节点root。

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。