系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 源码）