`
netxdiy
  • 浏览: 680726 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

YUI Research -- DOM module

 
阅读更多

<script type="text/javascript"><!-- google_ad_client = "pub-0241434510974184"; /* 博客文章广告728x90, */ google_ad_slot = "7316585398"; google_ad_width = 728; google_ad_height = 90; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

YAHOO.util.Region 一个对象所在的矩形区域的表示
它由top、right、bottom和left构成。

YAHOO.util.Region.contains(region)
参数是否整个包含在对象里面

YAHOO.util.Region.getArea()
取得区域面积

YAHOO.util.Region.intersect(region)
取得与参数相交的区域

YAHOO.util.Region.union(region)
取得最小的能同时包含对象和参数的区域

YAHOO.util.Region.toString()
打印出top、right、bottom和left

YAHOO.util.Region.getRegion(el)
得到el所占据的区域

YAHOO.util.Point 代表一个点
它由x和y构成;
它的prototype是Region的一个实例。

YAHOO.util.DOM
为DOM操作提供辅助方法
内部缓存了样式连字符的转换结果和用于class查找的Reg;
所属函数的el可以是String、HTMLElement和Array的一种。

YAHOO.util.Dom.get(el) 返回一个HTMLElement引用

YAHOO.util.Dom.getStyle(el, property) 返回el中property相关样式的值
YAHOO.util.Dom.setStyle(el, property, val) 设置el中property相关样式的值
getStyle先查找元素style属性中的样式,如果没有在该style属性中定义property属性,则查找样式表中对元素对应property的定义;
屏蔽了IE document.defaultView.getComputedStyle和其他浏览器document.defaultView.getComputedStyle的差异;
在IE中把float转换成styleFloat,其他则转换成cssFloat;
在IE中把opacity转换为filter表示,并把filter的值域从0-100转换成0-1;
屏蔽浏览器在初始化阶段进行。

YAHOO.util.Dom.getXY(el)
YAHOO.util.Dom.getX(el)
YAHOO.util.Dom.getY(el)
返回el在整个页面中的坐标
如果el不在Dom tree中或display为none,返回false;
在IE 中用getBoundingClientRect加上scrollLeft或scrollTop计算坐标;在其它浏览器中,则把el的 offsetLeft和offsetTop一层层地往上加。在Safari中,如果其中一层的position为absolute,则结果要减去body 的offset。还有在Opera中当display为inline或table-row时,要减去scroll。

YAHOO.util.Dom.setXY(el, pos, noRetry)
YAHOO.util.Dom.setX(e, x)
YAHOO.util.Dom.setY(el, y)
设置el在整个页面中的坐标
如果el不在Dom tree中或display为none,返回false;
如果el的postion为static,则把它设置为relative,然后再进行计算;
此方法主要是通过设置el的left和top两个样式来实现的。
算法是用pos减去getXY(el)加上delta。当display为relative且left为auto时,不用设置它的left,所以为delta为0。但当display为absolute且left为auto时,实际上el离offsetParent是有一个距离的,所以把delta设置为offsetLeft。top同上;
此函数默认会在第一次设置完el的xy之后用getXY检查一下当前的xy和pos是否相等,不相等的话会再调用setXY一次。把noRetry设为ture可以不执行此操作。

YAHOO.util.Dom.getRegion(el)
得到el的Region

YAHOO.util.Dom.getClientHeight()
YAHOO.util.Dom.getClientWidth()

已被getViewportWidth和getViewportHeight代替。
YAHOO.util.Dom.getViewportHeight()

YAHOO.util.Dom.getViewportWidth() 得到viewport(滚动条不算)的宽和高
获取高度时,如果浏览器是Safari或Opera,则通过self.innerHeight获取;FF和IE如果在标准模式下,则 document.documentElement.clientHeight;在Quirk模式下,则 document.body.clientHeight;
获取宽度时,如果浏览器是Safari,则通过self.innerWidtht获取;Opera、FF和IE如果在标准模式下,则 document.documentElement.clientWidth;在Quirk模式下,则 document.body.clientWidth。

YAHOO.util.Dom.getElementsByClassName(className, tag, root, apply)
得到指定className的所有HTMLElement元素
apply将会作用在查找到的每个元素上,scope和参数都是该元素。

YAHOO.util.Dom.hasClass(el, className)
YAHOO.util.Dom.addClass(el, className)
YAHOO.util.Dom.removeClass(el, className)

YAHOO.util.Dom.replaceClass(el, oldClassName, newClassName) 对class操作的工具函数

YAHOO.util.Dom.generate(el, prefix)
生成ID
如果el不为空,则把生成的ID赋给它;
prefix的默认值是"yui-gen";
此方法使用YAHOO.env._id_counter作为生成ID的计数器。


YAHOO.util.Dom.getAncestorBy(node, method) 获取最近一个通过method测试的祖先
node不能为ID。
YAHOO.util.Dom.getAncestorByClassName(node, className)
获取最近一个class为className的祖先
YAHOO.util.Dom.getAncestorByTagName(node, tagName)
获取最近一个标记名为tagName的祖先


YAHOO.util.Dom.getPreviousSiblingBy(node, method) 获取最近一个
通过method测试的左兄弟
YAHOO.util.Dom.getPreviousSibling(node) 获取最近一个左兄弟

YAHOO.util.Dom.getNextSiblingBy(node, method) 获取最近一个通过method测试的右兄弟
YAHOO.util.Dom.getNextSibling(node) 获取最近一个
右兄弟

YAHOO.util.Dom.getFirstChildBy(node, method) 获取一个
通过method测试的子元素
YAHOO.util.Dom.getFirstChild(node) 获取一个子元素

YAHOO.util.Dom.getLastChildBy(node, method) 获取最后一个通过method测试的子元素
YAHOO.util.Dom.getLastChild(node) 获取最后一个子元素
YAHOO.util.Dom.getChildrenBy(node, method) 获取
通过method测试的所有子元素
YAHOO.util.Dom.getChildren(node) 获取
所有子元素

YAHOO.util.Dom.getDocumentScrollLeft() 获取
文档向右滚动的距离
YAHOO.util.Dom.getDocumentScrollTop() 获取
文档向下滚动的距离

YAHOO.util.Dom.insertBefore(newNode, newNode)

YAHOO.util.Dom.insertAfter(newNode, newNode) 节点插入工具方法

YAHOO.util.Dom.getClientRegion() 获取整个浏览器viewport的Region

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics