系Javascript架構開發(六) 節點定位

節點定位就是擷取一個元素所在的位置。
jQuery中和節點定位有關的函數為：
$.prototype.offset
$.prototype.position

在DOM編程中，W3C已規定一系列用來定位節點的成員：
offsetLeft offsetTop scrollTop scrollLeft getBoundingRect getClientRects
不過這些屬性被瀏覽器搞得無法直接用。

節點定位看似簡單，實現含很多的技巧。在 jQuery 中，專門定義一個類用來管理定位（內部使用）。

說到位置，大家肯能想到就是元素的(x, y) 。然後事情不那麼簡單：
假設左上方為(0, 0) 位置， 那一個元素的位置是它的 絕對位置 。
但如果頁面可以滾動，在滾下之後，它的位置如何表示? 這裡我把這個位置叫節點的 當前位置。在 CSS 中， 使用 left top 能更改節點位置，但這個位置不是絕對座標的點，而是相對父節點的位置。我們把這個位置稱 位移位置。

見圖

在 jQuery中， position 返回 位移位置。 offset 返回當前位置。

下面一個個解決，如何擷取這些位置。

1. 滾動位置。（捲軸翻轉的大小）
全瀏覽器都一樣：
elem.srcollTop

2. 當前位置。
使用  getBoundingRect 擷取，但老瀏覽器需要手動計算這個值。

3. 絕對位置。
在當前位置加上滾動位置，即絕對位置。

4. 位移位置。
當前節點的絕對位置減位移節點的絕對位置。

（具體實現可見 jQuery 源碼）