documentElement

短命女 2021-10-23 13:58 124阅读 0赞

今天看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 的][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;

[document.documentElement _document.body]: http://www.cnblogs.com/clouds008/archive/2012/05/11/2496668.html