DOM對象
只讀屬性
- clientWidth、clientHeight：指的是元素的可視部分寬度和高度，即padding+content，如果沒有滾動條，即爲元素設定的高度和寬度，如果出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其本來寬高減去滾動條的寬高（即不包含border及滾動條寬高）
- html的clientWidth/clientHeight並不等於可視部分的寬度和高度，而是移除scrollBar寬度的瀏覽器客戶端完整區域的寬度和高度
- 設置了width/height css樣式的元素的clientWidth/clientHeight爲其實際內容content+padding
- 設置了width/height屬性的iframe元素內的body元素的clientWidth/clientHeight爲其實際內容content+padding
- offsetWidth、offsetHeight：指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關（即包含border及滾動條寬高）
- scrollWidth、scrollHeight：指的是當元素內部的內容超出其寬度和高度的時候，元素內容的實際寬度和高度，需要注意的是，當元素其中內容沒有超過其高度或者寬度的時候，該屬性值與clientWidth、clientHeight等價
- clientLeft、clientTop：用來讀取元素的border的寬度和高度的
- offsetLeft、offsetTop：說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當前元素的離自己最近的具有定位的（position不爲static）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以），該父級元素就是當前元素的offsetParent，如果從該元素向上尋找，找不到這樣一個父級元素，那麼當前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是當前元素，相對於其offsetParent左邊距離和上邊距離，即當前元素的border到包含它的offsetParent的border的距離
- getBoundingClientRect 當我們要獲取元素到窗口頂部距離時，需要通過offset+offsetParent.offset的循環或遞歸一層層向上累加，無疑是影響性能的，藉助此方法獲取的top bottom即可直接獲取到該元素頂部和底部相對於窗口頂部的距離，注意是窗口頂部而不是頁面最頂部，若要獲取元素到最頂部的距離則需要加上window.pageYOffset；該方法返回的width、height是經過css transform之後的結果
讀寫屬性
- scrollLeft、scrollTop：指的是滾動條到元素左邊、上邊的距離，若元素無法滾動則其值爲0
- el.style.*：style對象的任意屬性都是可讀寫的，如left、top、width、height，它只能夠獲取到該元素的行內樣式，而並不能獲取到該元素最終計算好的樣式，這就是在讀取屬性值的時候和上述只讀屬性的區別，要獲取計算好的樣式，請使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)，同時，給這些屬性賦值的時候需要帶單位的要帶上單位，否則不生效。
Event對象
- clientX、clientY：是當事件發生時，鼠標點擊位置相對於瀏覽器（可視區）的座標，即瀏覽器左上角座標的（0,0），該屬性以瀏覽器左上角座標爲原點，計算鼠標點擊位置距離其左上角的位置，不管瀏覽器窗口大小如何變化，都不會影響點擊位置的座標
- pageX、pageY：是事件發生時鼠標點擊位置相對於頁面的位置，通常瀏覽器窗口沒有出現滾動條時，該屬性和event.clientX及event.clientY是等價的，但是當瀏覽器出現滾動條的時候，pageX通常會大於clientX，因爲頁面還存在被捲起來的部分的寬度和高度
- screenX、screenY：是事件發生時鼠標相對於屏幕的座標，以設備屏幕的左上角爲原點，事件發生時鼠標點擊的地方即爲該點的screenX和screenY值
- offsetX、offsetY：是指當事件發生時，鼠標點擊位置相對於該事件源節點padding邊的位置，不包括border，即點擊該div，以該div的padding左上角爲原點來計算鼠標點擊位置的座標
此處均爲針對html5網頁(<!DOCTYPE html>)的討論