DOM元素在浏览器中的位置参数，如offset,ownerDocument
作者：zccst
2014-10-21
区分clientX和screenX的简单办法是？
client指浏览器左上角；screen指显示器左上角。所以正常情况下screen>=client。
2014-10-08
学习一下，好像有很多相关的参数
1，documentElement和body
（1）documentElement属性可返回文档的根节点。
语法：documentObject.documentElement
例子：
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
varx=xmlDoc.documentElement;
document.write("Nodename:"+x.nodeName+"<br/>");
document.write("Nodevalue:"+x.nodeValue+"<br/>");
document.write("Nodetype:"+x.nodeType);
输出：
Nodename:bookstore
Nodevalue:null
Nodetype:1
（2）document.body也是属性，指body
如果用<html>开头，可以用document.body
如果用DOCTYPE开通，则需用document.documentElement
兼容方法：varscrollTop=window.pageYOffset//用于FF
||document.documentElement.scrollTop
||document.body.scrollTop
||0;
（3）document.documentElement与document.body区别
都是指body，但是如果有DTD时用，那就用document.documentElement.scrollTop代替document.body.scrollTop就可以了。
2，各种偏移量
需要注意的是：区分是document.body的，还是某一个节点元素的。
（1）pageYOffset/pageXOffset
window.pageYOffset：Netscape属性，指的是滚动条顶部到网页顶部的距离
（2）offsetTop/offsetLeft,offsetWidth/offsetHeight
offsetTop改元素最上端离它父元素最上端的距离。
offsetHeight=height+padding+border+滚动条。
也即offsetHeight=clientHeight+border+滚动条。
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
（3）clientTop/clientLeft,clientWidth/clientHeight
body.clientTop=body.offsetTop-border-top
body.clientLeft=body.offsetLeft-border-left
clientLeft可以简单理解为元素边框厚度。与border的区别是：border仅仅是边框，而clientLeft是计算出来的。
clientHeight=height+padding(IE6.0/FF)
clientwidth=padding+width是元素的可见宽度。
大家对clientHeight都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
对比1：
clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
scrollWidth是对象的实际内容的宽且包括滚动部分，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
对比2：
clientLeft返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，如果不指定一个边框或者不定位该元素，他的值就是0.
offsetLeft返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
scrollLeft如果元素是可以滚动的，可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远，单位是象素。对于不可以滚动的元素，这些值总是0.
（4）scrollTop/scrollLeft,scrollWidth/scrollHeight
scrollTop卷起来的顶部距离。
（5）screenTop/screenLeft（window对象的属性）
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
（n）对象event的坐标
event.clientX相对文档的水平座标
event.clientY相对文档的垂直座标
event.offsetX相对容器的水平坐标
event.offsetY相对容器的垂直坐标
3，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();
兼容所有浏览器写法：
varro=object.getBoundingClientRect();
varTop=ro.top;
varBottom=ro.bottom;
varLeft=ro.left;
varRight=ro.right;
varWidth=ro.width||Right-Left;
varHeight=ro.height||Bottom-Top;
有了这个方法，获取页面元素的位置就简单多了:
varX=this.getBoundingClientRect().left+document.documentElement.scrollLeft;
varY=this.getBoundingClientRect().top+document.documentElement.scrollTop;
（3）getClientRects获取元素占据页面的所有矩形区域
获取元素占据页面的所有矩形区域。
varrectCollection=object.getClientRects();
getClientRects返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了,topleftbottomrightwidthheight六个属性
浏览器差异
getClientRects()最先由MSIE提出，后被W3C引入并制订了标准。目前主流浏览器都支持该标准，而IE只支持TextRectangle的topleftbottomright四个属性。IE下可以通过right-left来计算width、bottom-top来计算height。
ie和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小，只有display:inline的对象才能获取到TextRectangleList，例如emispan等标签。
应用场景
getClientRects常用于获取鼠标的位置，如放大镜效果。微博的用户信息卡也是通过该方法获得的。
（4）getClientRects和getBoundingClientRect的区别
返回类型差异：
getClientRects返回一个TextRectangle集合，就是TextRectangleList对象。
getBoundingClientRect返回一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象.
浏览器差异:
除了safari，firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect，
firefox3.1给TextRectangle增加了width和height。
ie和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小，只有display:inline的对象才能获取到TextRectangleList，例如emispan等标签。
通过测试，至少Chrome2+\Safari4\Firefox3.5\0pera9.63+已经支持getBoundingClientRect方法。
使用场景差异:
出于浏览器兼容的考虑，现在用得最多的是getBoundingClientRect，经常用来获取一个element元素的viewport坐标。
4，HTMLCollection和NodeList
HTMLElement，HTMLDocument,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接口对DOMDocument接口进行了扩展，定义HTML专用的属性和方法。
很多属性和方法都是HTMLCollection对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
HTMLCollection对象HTMLCollection是一个接口，表示HTML元素的集合，它提供了可以遍历列表的方法和属性。HTMLDOM中的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();可返回节点列表中处于指定的索引号的节点。
如果您觉得本文的内容对您的学习有所帮助，您可以微信：