芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
2

YUI 2: Dom Collection

作者 芒果/分类 代码/发布于 2010-02-21 17:08

文档对象模型集合 (Dom Collection) 由一系列简化 DOM 脚本编程任务的方法组成,包括元素定位和 CSS 样式管理,同时规范了跨浏览器的不一致性。

入门

使用 Dom Collection,需要在页面中使用 script 标签包含以下源文件:

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom-min.js"></script>

使用 Dom Collection

这部分介绍了 Dom Collection 的几种常见用途。包括以下几个小部分:

Quick Start
Positioning HTML Elements
Getting and Setting Styles
Getting the Viewport Size
Managing Class Names

快速入门

// #test: Find the element with an id of 'test' and store it in a variable
var element = YAHOO.util.Dom.get('test');

// .test: Get all elements with class 'test' (will be an array if there's more than one)
var elements = YAHOO.util.Dom.getElementsByClassName('test');

// div.test: Get all divs with class 'test'
var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');

// Get the first element with class 'test'
var element = YAHOO.util.Dom.getElementsByClassName('test'))[0];

// p: Get all p elements with the native DOM method getElementsByTagName
var elements = document.getElementsByTagName('p');

// Get the first p element
var element = document.getElementsByTagName('p'))[0];

定位 HTML 元素

由于不知道 HTML 元素在文档中的定位原理,获得元素在当前页面中的坐标可能比较困难。Dom Collection 提供的定位方法 (setXY(), getXY(), setX(), 等等) 可以确保准确定位。页面坐标被定义在整个 HTML 文档环境中,包括浏览器边框的一部分。

在以下示例中,getXY 方法返回一个带有 “test” 元素坐标值的数组。setXY 方法接受来自 HTML 元素 “test” 的坐标值,并将其应用到 “target” 元素上。

var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);

获取和设置样式

getStyle 方法允许你检索给定元素样式对象的属性;setStyle 方法允许你设置元素样式对象的属性。在 CSS 中,由于浏览器的差异性,opacity (不透明度) 属性应用方式繁多,setStyle 和 getStyle 方法则规范化了 opacity 属性。注:CSS opacity 属性不支持 Opera 9 之前的版本。

以下示例中,setStyle 方法设置了 “test” 和 “test2” 元素的 opacity 属性值为 0.5 (即不透明度为 50%;不透明度的值被定义在 0 到 1 的范围内)。getStyle 方法返回 “test2” 元素的当前 opacity 属性值。

YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');

请注意,上面的示例还演示了如何在一次调用中将 Dom Collection 方法应用到多个元素。

获取可视区域大小

可视区域 (Viewport) 被定义为当前可见文档区域的宽度和高度,与文档的绝对尺寸无关。由于浏览器和渲染模式的差异,获取当前可视区域大小可能有些困难。getViewportWidth 和 getViewportHeight 方法则能确保准确测量可视区域大小。

以下示例创建一个名为 viewport 的数组,并赋值当前可视区域的尺寸。

var viewport = [
   YAHOO.util.Dom.getViewportWidth(),
   YAHOO.util.Dom.getViewportHeight()
];

管理类名

Dom Collection 提供了一些动态管理 CSS 类名的方法。

其中包括:

getElementsByClassName(className, tagName, rootNode): 返回一个给定类名的元素数组。可以选择标签名和/或根节点参数控制选择范围,以提高性能。
hasClass(element, className): 确定某元素是否具有给定类名。
addClass(element, className): 为元素附加给定类名。
removeClass(element, className): 从元素中移除给定类名。
replaceClass(element, oldClassName, newClassName): 将给定元素的一个类名替换为另一个类名。

以下示例返回一个带有 “test” 类名的 div 元素数组:

var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');

英文原稿:YUI 2: Dom Collection | Yahoo! Developer Network
翻译整理:YUI 2: Dom Collection | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/yui-2-dom-collection/" title="YUI 2: Dom Collection" rel="bookmark">YUI 2: Dom Collection | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 2 条群众意见

  1. Kaylan /2011-07-08 07:11

    This is the preefct way to break down this information. 回应

    #1
  2. 袁源 /2011-08-29 14:48

    还不错呢,路过~~支持一下下 回应

    #2

下面我简单说几句