芒果小站

文档对象模型集合 (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 | 芒果