【轉】document.documentElement和document.body的區別

時間 2019-11-14

標籤 document.documentelement document documentelement document.body body 區別简体版

原文原文鏈接

轉自：http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.htmlhtml

網頁中獲取滾動條捲去部分的高度，能夠經過 document.body.scrollTop 來獲取，好比使div跟着滾動條滾動：web

<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{
    var div = document.getElementById("div");
    div.style.top = document.body.scrollTop + "px";
}

運行後沒有達到預期效果，輸出 document.body.scrollTop 的值一看，一直都是 0。一翻折騰，原來是 DTD 的問題，要是頁面直接用 <html> 開頭的話就沒有問題了。可是要符合 web 標準，DTD 固然是不能少的。htm

若是有 DTD 時用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就能夠了。對象

window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.documentElement.scrollTop + "px";
}

DTD相關說明：blog

頁面具備 DTD，或者說指定了 DOCTYPE 時，使用 document.documentElement。文檔

頁面不具備 DTD，或者說沒有指定了 DOCTYPE，時，使用 document.body。get

在 IE 和 Firefox 中均是如此。it

爲了兼容，無論有沒有 DTD，能夠使用以下代碼：io

var scrollTop = window.pageYOffset  //用於FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

documentElement 和 body 相關說明：function

body是DOM對象裏的body子節點，即 <body> 標籤；

documentElement 是整個節點樹的根節點root，即<html> 標籤；

DOM把層次中的每個對象都稱之爲節點，就是一個層次結構，你能夠理解爲一個樹形結構，就像咱們的目錄同樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄。

以HTML超文本標記語言爲例：整個文檔的一個根就是,在DOM中能夠使用document.documentElement來訪問它，它就是整個節點樹的根節點。而body是子節點，要訪問到body標籤，在腳本中應該寫：document.body。