documentElement

最新推荐文章于 2021-05-18 16:05:09 发布

韦奕

最新推荐文章于 2021-05-18 16:05:09 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：面试题 js html 文章标签： js html

本文链接：https://blog.csdn.net/weiyi89/article/details/9961017

js 同时被 3 个专栏收录

16 篇文章

订阅专栏

html

5 篇文章

订阅专栏

面试题

4 篇文章

订阅专栏

本文解释了documentElement与document的关系，并详细阐述了document.documentElement与document.body的区别，尤其是在获取页面滚动高度的应用场景下。

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

今天看js权威指南时看到书上有句代码：document.documentElement.children,一下就懵了： document和documentElement不一样么？但，如果document和documentElement同指的是document，那不对啊，children属性是只有Element对象也有的，document对象上如何能调用？？难道documentElement是Document和Element的桥梁，可以把Document转成一个Element?? 唉唉，不懂了。。

查了之后才明白：原来documentElement和document根本不是一回事，documentElement指的是文档的根节点，该属性是Document类的属性，即HTML和XML中均可用：在HTML中，它指的是html元素，而XML中，则视文档而定，总之是文档的根元素。

唉，真是的，这名起的，叫rootElement多清晰明了。

================================================

在搜索documentElement时，搜出了好多人关于document.documentElement 和document.body 的区别的讲解，主要是针对获取页面滚动高度时的区别，这里也简单说下吧，完善下对于documentElement的学习，简而言之就是：

在怪异模式下，用document.body.scrollTop, 在标准模式下，用document.documentElement.scrollTop.

除了这两种方式外，还有一种方式可以获得页面滚动的高度：window.pageYOffset，

此属性在IE10(IE9-中不支持)、Opera12.16（以前版本支持情况没调查），Chrome27.0.1453.116（以前版本支持情况没调查），Firefox23.0(Firefox貌似是一直就有这个属性的，没调查，没有发言权。。), Safari5.1.7(以前版本支持情况没调查)中都支持，且返回值与document.documentElement.scrollTop或document.body.scrollTop的值相同。

但我刚才随便测试了网上的一个页面，其document.compatMode返回值为"CSS1Compat"，即标准模式了，按上面的规则，document.documentElement.scrollTop的返回值应是滚动的高度，document.body.scrollTop的值应是0。在Firfox,IE,Opera（各浏览器版本即我上面所列的版本）中也确实如此，但在webkit内核的chrome和safari中却正好相反：document.documentElement.scrollTop的值是0，document.body.scrollTop的值是页面滚动的高度。但window.pageYOffset的值一直是对的。

所以为了兼容，应采用下面这种写法：

var scrolledHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;