在瀏覽器中有兩種座標系統 & 滑鼠座標：
1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。
2. 相對於 `window` - 座標 (0, 0) 在可視區 viewport 的最左上角。
3. 滑鼠座標 - 通常透過事件取得。
開始捲動後，document 的座標等於 window（viewport） 的座標加上 scroll 的位置，大部分的情況下我們會使用 document 座標系統，因為它即便 scroll 了，還是會保持一致。
乙個元素的座標位於該元素的左上角，不幸的是沒有屬性可以直接取得元素對應 document 的座標。不過可以透過計算 offsettop/offsetleft 和 offsetparent 來取得。
offsetparent 為元素的乙個唯讀屬性，其值為上層最接近的有設定 position 的容器元素。更精確的說是 position 不為 static 的元素。當沒有任何 positioned 的元素時最接近的 table cell 或根元素為 offsetparent。html 相容模式 body 為 offsetparent。display: none時 offsetparent 為 null。
乙個簡單的計算方式就是遍歷所有 offsetparent 計算 offsettop/offsetleft。簡單說就是不斷累加自己在父元素（positioned）的座標/距離，最終到達 document 則完成計算。
function getoffset (el)
return
}
不同瀏覽器行為可能不同。因為 border 和 scroll 是否加入計算造成差異。
慢！因為要遍歷所有 offsetparent。
這個方法時 w3c 標準，並且幾乎所有新版的瀏覽器都支援。它會回傳封閉該元素的乙個矩形(css border-boxes)，而這個矩形會透過物件的形式包含 top, left, right, bottom 等資料傳回。
再次強調 - 不幸的是沒有屬性可以直接取得元素對應 document 的座標。這個 getboundingclientrect() 取得的資訊是相對於 window 不是 document。
根據 css 規範，任何內容都會被放置在 css box 中。像是 div 這類的 box 又稱 block box，這類的 box 原本就是乙個矩形。如果元素是 inline 的話會牽扯到 inline box，line box，containing box，contain area。就會有多個的矩形來組織。又稱 anonymous block box
使用 getboundingclientrect()
function getoffset (el)
}
計算 page scroll。所有瀏覽器器除了 ie < 9 外都支援pagexoffset/pageyoffset。在 ie 當宣告了 dtd i.e docypte 則 scroll 位置可以透過 documentelement（）取得，否則就從 body 取。
在 ie < 8 document 或 body 會具有特殊的偏移，所以我們需要取得偏移並扣掉。但要注意的是 clienttop/clientleft 同時也表示 border 寬，一般來說我們不會替 document 或 body 設定 border，在這種情況下 ie 的document.documentelement.clienttop 不是 0 而是2px。因此我們要減掉。
加入捲動的距離，然後扣掉位移即是該元素相對於 document 的座標。
針對 firefox 我們需要而外使用四捨五入 math.round()
取得已經捲動多少距離
dtd（document type definition）檔案型別定義，定義 xml 的元素，結構，屬性。
使用 dtd 可以讓不同的使用者在交換資料時明白其資料格式的標準，而程式可以使用 dtd 來驗證 xml 是否正確。
在 html 中document.compatmode可以得知是否宣告了 dtd，值為backcompat為未宣告，css1compat為宣告 dtd。
client 字首的概略為相對於瀏覽器 viewport 或指內部 padding area。
offset 字首的概略為相對於父定位元素。
scroll 字首的概略為相對於完整頁面。
screen 相對於螢幕。
Dom操作補充
dom查詢方式 直接查詢 var obj document.getelementbyid i1 間接查詢 檔案內容操作 innertext 僅僅查詢文字內容 innerhtml 查詢全部內容 文字和標籤 舉例 doctype html html lang en head meta charset u...
譯 AngularJS中DOM操作
再翻譯一篇乾貨短文，原文 angularjs jquery 雖然angularjs將我們從dom的操作中解放出來了，但是很多時候我們還是會需要在controller view載入之後執行一些dom操作。問題是我們將dom操作的 放到controller中，然而controller是先於view載入的...
DOM 事件屬性補充
1.dom2事件處理程式的新增 利用addeventlistener 方法新增 a 格式 節點.addeventlistener 事件名稱 函式名,事件流 b 注意事項 l 同一節點可以新增多個相同的事件，這些事件會依次執行 l 刪除事件時需要用到removeeventlistener 格式 節點....