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

zccst

浏览: 3315535 次
性别:
来自: 北京

最近访客更多访客>>

consy

snowstorm

净瞎扯

离氺的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端-JS客户端

浏览器 ie

作者：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");

var x=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
兼容方法：var scrollTop = 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();

兼容所有浏览器写法：
    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坐标。

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 接口对 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(); 可返回节点列表中处于指定的索引号的节点。

如果您觉得本文的内容对您的学习有所帮助，您可以微信：

分享到：

js数据类型转换 | 打开MPP格式文件的十种方法

2014-10-08 17:07
浏览 4245
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论