document.body和document.documentElement的比较

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

守护_潇潇

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

阅读量626

点赞数

CC 4.0 BY-SA版权

分类专栏： js web前端开发

本文链接：https://blog.csdn.net/laixiaobailing/article/details/39323163

web前端开发同时被 2 个专栏收录

26 篇文章

订阅专栏

25 篇文章

订阅专栏

本文详细介绍了DOM中的body与html元素的性质差异，并深入探讨了两者在滚动高度计算上的区别。通过理解这些概念，开发者能够更高效地进行网页布局与交互设计。

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

document.body和document.documentElement比较：
document.body是DOM中Document对象里的body节点（相对body而言），document.documentElement是文档对象根节点(html)的引用（相对html而言）。

document.body.scrollHeight和document.documentElement.scrollHeight的区别：
document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度。
这是DOMDocument对象里的body子节点和整个节点树的根节点root。

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，兼容性代码如下：

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