`
zccst
  • 浏览: 3319887 次
  • 性别: 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(); 可返回节点列表中处于指定的索引号的节点。





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




分享到:
评论

相关推荐

    php怎么得到dom元素.docx

    下面将详细讲解如何在PHP中使用DOMDocument来获取和操作DOM元素。 首先,我们需要了解DOMDocument类的一些主要属性和方法: 1. **属性**: - `Attributes`: 存储节点的属性列表,只读。 - `childNodes`: 存储...

    DOM相关内容速查手册

    3. **offsetLeft** 和 **offsetTop**:这两个属性分别返回元素相对于其offsetParent的左边缘和顶部边缘的距离,包括边框,是计算元素在页面中位置的关键。 4. **offscreenBuffering**:这个属性主要应用于Web开发的...

    整理JavaScript对DOM中各种类型的元素的常用操作_.docx

    在 DOM 中,每个元素都可以看作是一个节点(node),每个节点都有一个 nodeType 属性,用于标识节点的类型。常见的 nodeType 取值包括: * 1:元素(element) * 2:属性(attr) * 3:文本(text) * 8:注释...

    xml-DOM教学PPT

    在实际应用中,使用DOM可以方便地查找特定元素,如通过`getElementsByTagName`或`getElementById`方法;修改元素属性,如`setAttribute`和`removeAttribute`;或者添加和删除子节点,如`appendChild`和`removeChild`...

    javascript DOM 操作.doc

    javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型...javascript DOM 操作可以在客户端动态地更改网页的内容和结构,但是在不同的浏览器中需要使用不同的方法和属性来实现。

    整理JavaScript对DOM中各种类型的元素的常用操作

    2. `insertBefore()`: 在指定子节点之前插入新节点,可用于控制插入位置。 3. `replaceChild()`: 用新节点替换已存在的子节点。 4. `removeChild()`: 移除指定的子节点。 5. `cloneNode()`: 创建节点的副本,`true`...

    jQuety1.3中文说明

    若提供了`context`(如DOM元素、jQuery对象),则只在指定的上下文中搜索。 示例中,`$("div &gt; p")`将返回一个包含所有`div`子元素的`p`元素的jQuery对象。而`$("input:radio", document.forms[0])`会选取文档中第...

    jQuery详细教程

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

    Html页面的dom常见属性

    在DOM中,每个节点都具有一些基本属性,这些属性可以帮助开发者更好地理解与操作DOM元素。接下来,我们将详细介绍这些属性及其用途: ### 基础属性 1. **offsetHeight**: - **定义**:获取元素的高度,包括内...

    使用DOM合理操作JS

    通过DOM,开发者能够以一种结构化的方式访问和操作网页文档中的各种元素。 W3C组织的主要任务之一就是制定Web技术的标准,这些标准涵盖了多个方面,包括但不限于DOM、CSS、XML以及XHTML等。DOM作为其中一项标准,为...

    jQuery选择器

    2. `.index()`方法用于查找元素在匹配集合中的位置,可以指定选择器或元素进行查找。 3. `.each()`方法遍历jQuery对象中的每个元素,执行传入的函数,函数接收索引和元素作为参数。 jQuery的基本选择器包括CSS选择...

    js dom对象的操作

    在JavaScript中,DOM主要负责处理与网页元素的交互。 #### 二、DOM节点类型 DOM的核心概念之一是节点(Node),它分为多种类型: 1. **Document**:最顶层的节点,所有的其他节点都是附属于它的。 2. **Document...

    javascript_使用DOM笔记1

    在DOM中,每个元素都有其父元素、前一个同级元素和后一个同级元素等关系。以下是一些用于判断这些关系的方法: 1. **`parentNode`**: 返回当前元素的父元素。 2. **`previousSibling`**: 返回当前元素的前一个同级...

    javascript 常用DomAPI总结

    本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称,只读。 - **Node.nodeType**: 返回节点类型的常数值,...

    用 PHP 读取和编写 XML DOM

    在处理XML文档时,DOMDocument对象提供了许多方法,如`saveXML()`用于将DOM对象保存为XML字符串,`save()`用于将DOM对象保存到文件。 接下来,我们关注`DOMElement`类,它是DOM树中的基本元素节点。可以使用`...

    js中使用xpath来解析xml元素.docx

    XPath不仅用于XSLT,也可以用于XML Schema、XPointer和其他XML API如DOM和SAX等。 XPath表达式可以用来选择文档中的元素、属性、文本节点等。其语法类似于文件系统的路径表示法。例如,`/books/book/title` 是一个...

    jQuery源码分析之init的详细介绍

    通常使用 document.querySelectorAll 来获取一组 DOM 元素,然后将这些元素作为数组存储在 jQuery 对象中,同时设置 jQuery 对象的 length 属性。在实现链式调用时,如果涉及到只能对单个 DOM 对象操作的方法(如 ...

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

    通过对各种浏览器特性的检测和利用,以及对特殊情况的精细处理,`getXY`能够提供一个可靠的解决方案,帮助开发者在不考虑浏览器细节的情况下获取元素的绝对位置。虽然这个过程可能涉及较多的条件判断和边缘情况处理...

Global site tag (gtag.js) - Google Analytics