DOM元素在浏览器中的位置参数，如offset,ownerDocument

作者：zccst

学习一下，好像有很多相关的参数

1，pageYOffset / pageXOffset
window.pageYOffset：Netscape属性，指的是滚动条顶部到网页顶部的距离



2，getBoundingClientRect 获取元素位置
（1）TextRectangle
对于文本对象，W3C提供了一个 TextRectangle 对象，这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素，比如：a, span, em这类标签元素。

（2）getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象（TextRectangle），该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

使用：rectObject = object.getBoundingClientRect();

兼容所有浏览器写法：
    var ro = object.getBoundingClientRect();
    var Top = ro.top;
    var Bottom = ro.bottom;
    var Left = ro.left;
    var Right = ro.right;
    var Width = ro.width||Right - Left;
    var Height = ro.height||Bottom - Top;

有了这个方法，获取页面元素的位置就简单多了:

    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
    var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;


（3）getClientRects获取元素占据页面的所有矩形区域

获取元素占据页面的所有矩形区域。
var rectCollection = object.getClientRects();

getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了, top left bottom right width height 六个属性


浏览器差异
getClientRects() 最先由MS IE提出，后被W3C引入并制订了标准。目前主流浏览器都支持该标准，而IE只支持TextRectangle的top left bottom right四个属性。IE下可以通过right-left来计算width、bottom-top来计算height。
ie 和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小，只有display:inline的对象才能获取到TextRectangleList，例如em i span 等标签。

应用场景
getClientRects常用于获取鼠标的位置，如放大镜效果。微博的用户信息卡也是通过该方法获得的。

（4）getClientRects 和 getBoundingClientRect 的区别

返回类型差异：

getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象.

浏览器差异:

除了safari，firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect，
firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小， 只有display:inline的对象才能获取到TextRectangleList，例如em i span 等标签。

通过测试，至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。

使用场景差异:

出于浏览器兼容的考虑，现在用得最多的是getBoundingClientRect，经常用来获取一个element元素的viewport坐标。


3，HTMLCollection 和NodeList

HTMLElement，ownerDocument

HTMLElement 对象  表示 HTML 中的一个元素。一个 HTML 文档中的每个元素都有和元素的 HTML 属性对应的属性。这里列出了所有 HTML 标记都支持的属性。其他的属性，都特定于某种具体的 HTML 标记。HTMLElement 对象继承了 Node 和 Element 对象的标准属性，也实现了下面所描述的几个非标准属性：className, currentStyle, dir, id, innerHTML, lang, offsetHeight/offsetWidth, offsetLeft/offsetTop, offsetParent, scrollHeight/scrollWidth, scrollTop/scrollLeft, style, title.


HTMLDocument 对象  表示 HTML 文档树的根。HTMLDocument 接口提供了对 HTML 层级的访问。
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。

HTMLCollection 对象  HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。
下面的每个项目（以及它们指定的属性）都返回 HTMLCollection：
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)
HTMLDocument 接口的许多属性都是 HTMLCollection 对象，它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements 和 select.options 都是 HTMLCollection 对象。HTMLCollection 还提供了遍历 Table 的各行以及 TableRow 的各个单元格的一种方便方法。
在上面已经提到了，HTMLCollection 对象是带有方法的 HTML 元素的集合，用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。在 JavaScript 中，HTMLCollection 对象的行为和只读数组一样，可以使用 JavaScript 的方括号，通过编号或名称索引一个 HTMLCollection 对象，而不必调用 item() 方法和 namedItem() 方法。
HTMLCollection 对象是只读的，不能给它添加新元素，即使采用 JavaScript 数组语法也是如此。
HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。
属性：cssRules 只读属性，返回指示列表长度的整数（即集合中的元素数）。
方法：item() 返回集合中指定位置的元素（节点）, namedItem() 返回集合中 name 属性或 id 属性具有指定值的元素（节点）。

Node 对象   是整个 DOM 的主要数据类型。节点对象代表文档树中的一个节点。
节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。
请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。
属性：nodeName/nodeType/nodeValue, previousSibling/nextSibling, childNodes, firstChild/lastChild, parentNode/ownerDocument, baseURI, localName, namespaceURI, prefix, textContent(返回节点及其后代的文本内容), text, xml.
方法：cloneNode(), insertBefore(), appendChild/removeChild/replaceChild, isEqualNode/isSameNode, normailze(合并相邻的text节点并删除空的text节点);

ownerDocument：返回节点的根元素（document对象）

NodeList 对象  代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
注释：在一个节点列表中，节点被返回的顺序与它们在 XML 被规定的顺序相同。
属性：length
方法：item(); 可返回节点列表中处于指定的索引号的节点。

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—