`
zccst
  • 浏览: 3287046 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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");

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





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




分享到:
评论

相关推荐

    jQuery详细教程

    $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语...

    jQuety1.3中文说明

    如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。 参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 ________________________________________ This ...

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 ~/ScriptLibrary/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js" /&gt; 2、修改MicrosoftAjax....

    ownerDocument01.rar_Not Yet

    The "getOwnerDocument()" method returns null if the target node itself is a DocumentType which is not used with any document yet.

    jQuery()方法的第二个参数详解

    文档对ownerDocument的解释是:“创建DOM元素所在的文档” 也就是说,如果你要编写挎document的脚本,比如iframe或者用window.open开一个新窗口,可能会用得着它 3.jQuery(html, props) 这个应该比较常用了,直接贴...

    javascript YUI 读码日记之 YAHOO.util.Dom – Part.4

    var getXY = function() { // 判断是否是 IE if (document.documentElement.getBoundingClientRect) { // 注1 return ... var rootNode = el.ownerDocument; return [box.left + Y.Dom.getDocumentScr

    详解jQuery中的prop()使用方法

    注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。 提示:如需检索 HTML 属性,请使用 attr() 方法...

    jquery()函数的三种语法介绍

    接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器: 代码如下: jQuery(selector,[context]) 使用原始 HTML 的字符串来创建 DOM 元素: 代码如下: jQuery(html,[ownerDocument]) 绑定一个在 DOM 文档载入...

    jQuery1.3API参考文档中文版

    * load 的data参数在jQuery 1.3中也可以接受String + ajax的error回调的第二个参数可能值"timeout", "error", "notmodified" 和 "parsererror" + ajax参数xhr * animate 的duration为0的问题 * show, hide, toggle, ...

    全面解析Bootstrap中tooltip、popover的使用方法

    一、tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理:  ...1、ownerDocument:文档;包含两个对象:、documentElement(根节点) 2、$.contains(domA, domB):判断domA是否包含domB元素

    jQuery 1.3 API 参考文档中文版 html

    * load 的data参数在jQuery 1.3中也可以接受String + ajax的error回调的第二个参数可能值"timeout", "error", "notmodified" 和 "parsererror" + ajax参数xhr * animate 的duration为0的问题 * show, hide, toggle, ...

    JavaScript基本语法

    getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 createElement(name) Node Node createTextNode(text) Node 创建一个纯文本结点 ownerDocument Document 指向这个节点所属的文档

    Firefox和IE兼容性问题及解决方法总结

    在开发多语言java 网站的过程中,发现不少FF中可以正常运行的代码,可是在IE中不行,反之亦然。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下: 1.兼容firefox的 outerHTML,FF中没有outerHtml的...

    jquery需要的所有js文件

    jquery需要的所有js文件 /*! * jQuery UI 1.8.18 * ... * Dual licensed under the MIT or GPL Version 2 licenses. ... * ... */(function(a,b){function d(b){return!a(b).parents().andSelf().filter(function(){return ...

    jQuery 1.4.1 中文参考

    11.1 浏览器及特性检测 180 11.1.1 jQuery.support 180 11.1.2 jQuery.browser 181 11.1.3 jQuery.browser.version 182 11.1.4 jQuery.boxModel 182 11.2 数组和对象操作 183 11.2.1 jQuery.each(object, [callback]...

    JQuery核心函数是什么及使用方法介绍

    相信很多人在项目中也都用过。现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的。使用熟练的大神可以简单看看,对于小白来说还是纯纯的干货。熟悉jQuery还是先从核心函数入手比较好,后面其他的...

    关于javascript document.createDocumentFragment()

    也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling,

    jquery 缓存问题的几个解决方法

    在IE浏览器下,一般的ajax的方法都是cache等于true的,下面有几个不错的解决方法,感兴趣的朋友可以参考下

Global site tag (gtag.js) - Google Analytics