特点:对于大部分DOM操作提供了批量操作的功能,而对用户只需使用统一的函数接口就能完成单个或批量的操作,主要得益于DOM内部的batch方法。
?
1.???? Element的查找
YAHOO.util.Dom.get(element)
调用document.getElementById(element),获取指定的页面元素。
?演示实例:https://www.html.cn/YUI/DOM/get.html
转载请注明出处:https://www.html.cn或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节点数组。根节点为可选参数,不指定时在整个页面中查找
?演示实例:https://www.html.cn/YUI/DOM/getElementsByClassName.html
转载请注明出处:https://www.html.cn或http://www.9demo.com
??=================================================================================
YAHOO.util.Dom.inDocument (el)
判断元素el是否在当前的DOM中,支持批量操作。
??=================================================================================
YAHOO.util.Dom.getAncestorByTagName( node , tagName )
Object getAncestorByTagName ( node , tagName )
- Parameters:
node <String | HTMLElement>
用作出发点的一个 HTMLElement 或者 IDtagName <String>
- Returns:
Object
- HTMLElement 对象
?演示实例:https://www.html.cn/YUI/DOM/getAncestorByTagName.html
转载请注明出处:https://www.html.cn或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)。
演示实例:https://www.html.cn/YUI/DOM/addclass.html
转载请注明出处:https://www.html.cn或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:
参数:
el <String | HTMLElement | Array>
(可选) 可选元素的数组元素的添加一个ID
prefix <String>
(optional) an optional prefix to use (defaults to “yui-gen”).
例如:
- var?shim?=?document.createElement(‘div’); ??
- YAHOO.util.Dom.generateId(shim,?‘split-shim’); ??
- window.document.body.appendChild(shim); ??
?这里创建出来的div的ID是split-shim0
演示实例:https://www.html.cn/YUI/DOM/generateId.html
转载请注明出处:https://www.html.cn或http://www.9demo.com
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂