Dom Collection
Dom Collection 包括一组便捷的方法,简化常用的DOM脚本方法,包含元素定位和CSS样式管理,同时规范了跨浏览器的兼容的不同情况
Getting Started
为了使用Dom Collection ,在你的页面上包含一下的脚本标签:
<!– Dependencies –>
<script src=”http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js”></script>
<!– Source file –>
<script src=”http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js”></script>
YAHOO.util.Dom是一个单独的类,不需要初始化。从YAHOO.util.Dom你可以简单使用类方法(例如:YAHOO.util.Dom.getXY(“myElementId”),YAHOO.util.Dom.getStyle(“myElementId”))
使用Dom Collection
以下章节描述了一些常用的Dom Collection.包含这些部分:
1.?定位HTML元素
2.?获取和设置风格
3.?获得视窗尺寸
4.?管理class名称
定位HTML元素
如何定位一个HTML元素在document中的位置,获得其在当前页面中的坐标可能是一项挑战。Dom Collection的定位方法(setXY(),getXY(),setX()等等)可以被确保精确定位。页面坐标被定义在整个HTML document中,包括跨浏览器。
在接下来的例子中,getXY方法返回ID属性为“test”的HTML元素的X和Y的坐标数组。setXY方法设置第二个ID为target的HTML元素的坐标为‘test’的坐标:
Var pos =YAHOO.util.Dom.getXY(’test’);
YAHOO.util.Dom.setXY(’target’, pos);
获得和设置样式
getStyle方法可以允许你重新找回元素对象的风格;setStyle方法允许您设置元素的样式属性。在CSS中,应用一种样式有不同的方法是建立在浏览器之上的;setStyle和getStyle 方法用不透明的属性正常化解决了这一问题。注:Opera第9版之前是不支持CSS透明化的。
在接下来的例子中,setStyle方法设置ID为”test”的方法和ID为”test2”元素都有0.5的不透明度(或者是50%;不透明度在0和1之间)。getStyle方法返回当前ID为”test2”的HTML元素的不透明度的值。
YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);
获得视图尺寸
这个视图被定义为当前可见的document的宽度和高度,无论是绝对的document尺寸还是。获得当前视图尺寸是建立在跨浏览器和渲染模式上的挑战。getViewpoortWidth和getViewportHeight方法确保精确视图的测量。
以下例子创建了一个数组名为viewport和包含当前视图的定义。
var viewport = [
?? YAHOO.util.Dom.getViewportWidth(),
?? YAHOO.util.Dom.getViewportHeight()
];
管理class名称
Dom Collection收集了大量的方法,来动态管理类名。
包括
?getElementsByClassName(className,tagName,rootNode):返回一组元素数组有class name应用的。能够被任意范围内由tagName 或者 根节点来增加表达。
?hasClass(element,className):决定一个元素是否提供class name。
?addClass(element,className):增加class name到元素中。
?removeClass(element,className):从元素中移除class name
?replaceClass(element,oldClassName,newClassName):从给出的元素中更换另一个class name。
接下来的例子返回一个用友test的class name的DIV元素的数组。
var elements = YAHOO.util.Dom.getElementsByClassName(’test’, ‘div’);
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂