在開發中發現了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