你不知道的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