在开发中发现了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