WEB前端开发

特点：对于大部分DOM操作提供了批量操作的功能，而对用户只需使用统一的函数接口就能完成单个或批量的操作，主要得益于DOM内部的batch方法。

1.     Element的查找
YAHOO.util.Dom.get(element)

调用document.getElementById(element)，获取指定的页面元素。

 演示实例：http://www.css88.com/YUI/DOM/get.html
转载请注明出处：http://www.css88.com或http://www.9demo.com

 =================================================================================

YAHOO.util.Dom.getElementsBy(method,tagName,rootNode)

在rootNode的子节点中按照用户提供的method方法在所有标签为tagName的element中查找符合条件的节点。rootNode不指定则在整个Document中查找，method是一个method(elementID)类型的函数对象，该函数对象的返回值为Boolean值。

  =================================================================================

YAHOO.util.Dom.getElementsByClassName ( className , tag , root , apply )

返回应用指定类名的元素数组，可以通过标记名称和根节点提升性能，限制返回的元素数目。
 

参数：
样式名<string>类别名称，以配合打击
<string> （可选）标记元素的名称正在收集
根<string | htmlelement> （可选） htmlelement或一个ID使用为出发点
申请<function> （可选）功能，适用于每个元素时，发现
 

返回指定根节点下所有标签为tagName,class为className的DOM节点数组。根节点为可选参数，不指定时在整个页面中查找

 演示实例：http://www.css88.com/YUI/DOM/getElementsByClassName.html
转载请注明出处：http://www.css88.com或http://www.9demo.com

  =================================================================================

YAHOO.util.Dom.inDocument (el)

判断元素el是否在当前的DOM中，支持批量操作。

  =================================================================================

 演示实例：http://www.css88.com/YUI/DOM/getAncestorByTagName.html
转载请注明出处：http://www.css88.com或http://www.9demo.com

 =================================================================================

2.     样式控制和访问
YAHOO.util.Dom.hasClass(element, className)

判断element标签上是否指明了className的class，支持批量操作；

 =================================================================================

YAHOO.util.Dom.addClass(element, className)

参数：
element：<String | HTMLElement | Array>   要修改样式的对象
className：<String>  新加进来的样式名

给指定标签增加名为className的class，支持批量操作.
给某一特定元素或集合的元素增加了一个样式的名称（className）。

演示实例：http://www.css88.com/YUI/DOM/addclass.html
转载请注明出处：http://www.css88.com或http://www.9demo.com

============================================================

YAHOO.util.Dom.removeClass(element, className)

删除element上的名为className的class，支持批量操作

YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName)

替换element上的oldClassName样式为newClassName，支持批量操作

YAHOO.util.Dom.getStyle(element, property)

获取element的style中的property属性，支持批量操作

YAHOO.util.Dom.setStyle(element,property,pValue)

设置element的style的property属性为pValue，支持批量操作

注：本节中的class指的是CSS中定义的class。

3.     位置控制和访问
位置控制的相关函数

YAHOO.util.Dom.setX

YAHOO.util.Dom.setY

YAHOO.util.Dom.setXY

YAHOO.util.Dom.getX

YAHOO.util.Dom.getXY   返回元素坐标 [ left,top ]

YAHOO.util.Dom.getRegion

获取元素的坐标Region对象{left,top,right,bottom}

可支持批量操作

获取页面可视面积的高度和宽度

YAHOO.util.Dom.getClientWidth

YAHOO.util.Dom.getClientHeight

获取Document的高度和宽度

YAHOO.util.Dom.getDocumentWidth

YAHOO.util.Dom.getDocumentHeight

获取页面可视区域的高度和宽度（不包含滚动条）

YAHOO.util.Dom.getViewportHeight

YAHOO.util.Dom.getViewportWidth

Region对象：{left,top,right,bottom}

YUI提供的一个对象，用于完成多个矩形区域间的计算（如相交，包含。

YAHOO.util.Region.contains(region)

判断是否包含了region区域

YAHOO.util.Region.getArea

计算面积

YAHOO.util.Region.intersect(region)

计算与region区域的交迭区域

YAHOO.util.Region.union(region)

计算与region区域求并集（即包含两个区域的最小区域）

Point对象：{x,y}

YUI提供的对象，用于定义坐标点。

4.     其他

YAHOO.util.Dom.generateId(el , prefix );

生成一个自动递增的唯一ID:
参数:

(可选) 可选元素的数组元素的添加一个ID

(optional) an optional prefix to use (defaults to “yui-gen”).

例如：

 这里创建出来的div的ID是split-shim0
演示实例：http://www.css88.com/YUI/DOM/generateId.html
转载请注明出处：http://www.css88.com或http://www.9demo.com

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《YUI提供的Dom操作(第一部分)（2008年8月3日更新）》