你不知道的document和document.documentElement

MrZx發表於2018-06-21

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


相關文章