你不知道的document和document.documentElement

在开发中发现了JQuery和Zepto两个关于获取document的坑。

复现问题：

$(document).scrollTop();
// 发现得到的值是 undefined
$(document.body).scrollTop();
// 这个是有值得复制代码

这时候我们思考一下为什么？查看源码

# zepto
document = window.document
# JQ 同样的代码
document = window.document
但是jq对window.document.documentElement做了处理var documentElement = document.documentElement;复制代码

我们通过打印，查看原生的

console.dir(document); 
console.dir(document.constructor); => ƒ HTMLDocument() { [native code] }

console.dir(document.documentElement);
console.dir(document.documentElement.constructor); => ƒ HTMLHtmlElement() { [native code] }复制代码

打印对比我们会发现。

document是没有html的节点属性的。

document.documentElement是有html节点属性的。

所以我们通过window.document获取到的对象只是一个文档对象，但document.documentElement才是一个真正的html节点对象。

所以我们在封装的时候一定要注意，想获取文档的样式属性时候一定要使用document.documentElement 并做兼容处理 document.body