JavaScript中documentElement和body的区别及jQuery中实现兼容的原理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tank_in_the_street/article/details/78247799

        在浏览器里documentElement是一个只读属性，返回的是document节点下的子节点，一般是html。而document.body返回的是body。这两个东西在用到获取浏览器的scrollTop等应用时会发现一些不同，下面代码放到有滚动条的页面运行，当你滚动滚动条的时候，看看火狐、谷歌和ie浏览器到底得出什么样的结果。如：

console.log(document.documentElement.scrollTop)
console.log(document.body.scrollTop)

        可以发现在ie和火狐浏览器里，第一段代码有输出结果而第二段代码总是输出0，而在谷歌浏览器中的情况正好相反。这是由于浏览器本身的兼容效果决定的。如果一个html文件没有DTD开头的话，那么在谷歌浏览器则没有影响，在火狐浏览器中，则只能通过document.body来获取scrollTop的值。而在ie浏览器中，没有了DTD上面的这两个方法都可以用。

        于是在jQuery的源码中，为了实现兼容各个浏览器，于是就采用取最大值的方法，如：

elem = document;
 doc = elem.documentElement;

 // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
 // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
return Math.max(elem.body["scroll" + name], doc["scroll" + name], elem.body["offset" + name], doc["offset" + name], doc["client" + name]);

        而我们在用原生js时，可以采用jquery源码，也可以这样做：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop