thinking

one platform thousands thinking

YAHOO.util.Dom之寻找节点(转)

YAHOO.util.Dom之寻找节点

YUI的Dom方法一共有45个,在这里谈一下我学习过程遇到的问题和经验,先介绍17个寻找节点类型的Dom方法。

get(el):记得初学JavaScript的时候,最先认识的两个方法就是getElementById和 getElementsByTagName,这两个东东也基本上能够找到大多数你需要找的东西啦。YUI里的get方法跟getElementById类 似,但是它的能力却要强很多了,el可以是String、HTMLElement或者Array。

getElementsBy ( method , tag , root , apply , o , overrides ):这个会和getElementsByTagName比较像一点点吧,但是功能差好远,基本上getElementsBy应该可以找到一切你想找的元 素,method是定义一个校验目标元素的方法,返回一个boolean值,tag是目标元素的nodeName,root是指在哪个元素中进行寻找,也 可以说成是一个范围吧。apply,我必须要说下它。。当初它困扰我了半天,YUI给出的解释是“A function to apply to each element when found ”,可以理解为一个回调函数吧,再看看YUI的代码,其中有这么一段:

if (apply) {
Y.Dom.batch(nodes, apply, o, overrides);
}

我当时的理解是,因为最终返回的是一个节点的数组嘛,我就以为执行完前边的校验后得到的结果再在apply中进行一次,也就是我在apply中再对 结果元素进行下一步的节点寻找,那么最后返回的应该是apply执行后得到的所有节点集合。。。可是无论我怎么试,最终返回的都是通过method方法所 得到数组,并没有再次通过apply获得更多的元素,嘿嘿,不要见笑哈,当时就是这么想的。。。后来发现,实际上不是这样子,我理解错误的原因只要就在那 个batch上,当时的错误在于,我把batch放进getElementsBy里了,那么在batch里边return后应该不会再继续执行 return nodes了,但是实际上这里的Y.Dom.batch(nodes, apply, o, overrides)只是一个最终的结果而已,所以return nodes还是会执行的。那么这个apply的作用在何处呢?其实作用就是执行一次回调嘛哈,它是可以实现我之前的想法的,但是不是直接返回的,举个例 子:

var uls = YAHOO.util.Dom.getElementsBy(function(el){
return el.className === 'J_tab';
},'ul','content');

这是寻找id为content的容器下className为J_tab的节点,那么如果我同时还需要获取每个ul下的所有li节点该怎么做呢,总不能再来一次循环吧,当然也可以啦,不过要好好利用下YUI吧,那就是让它获取ul的同时获取li:

var lis = [];
function getli(obj) {
lis.push(obj.getElementsByTagName('li'));
}
var uls = YAHOO.util.Dom.getElementsBy(function(el){
return el.className === 'J_tab';
},'ul','content',getli);

OK,这样子就一举两得了哈~后边的作用域和上下文就不多说啦,关于batch的神奇,下次再说哈,真的很神奇。。。

getElementBy ( method , tag , root ):这个就是通过method校验的第一个元素。

getElementsByClassName ( className , tag , root , apply , o , overrides ):是通过className进行元素寻找,其实这个方法是getElementsBy的一个特殊方法。

getChildren ( node ):这个与Dom中的childNode类似。

getChildrenBy ( node , method ):通过method方法过滤子元素,注意参数的顺序以及node不可为id。

getFirstChild ( node ):寻找第一个子元素,跟Dom中的firstChild有些类似。

getFirstChildBy ( node , method ):寻找第一个通过method校验的子元素,注意参数的顺序以及node不可为id。其实这个等同于getChildrenBy得到的第一个元素。

getLastChild ( node ):寻找最后一个子元素,与Dom中的lastChild有些类似。

getLastChildBy ( node , method ):与getFirstChildBy相反,倒着寻找。

getAncestorBy ( node , method ):寻找父节点,可以无限的往上级寻找,直到找到为止,node不能为id,跟Dom中的parentNode类似,不过这里不用反复的parentNode啦。

getAncestorByClassName ( node , className ):通过className寻找父节点,是getAncestorBy的一个特殊方法。

getAncestorByTagName ( node , tagName ):通过tagName寻找父节点,是getAncestorBy的一个特殊方法。

getNextSibling ( node ):寻找紧挨的下一个同级非文本节点的节点,与Dom中的nextSibling类似,省去了判断文本节点麻烦。

getNextSiblingBy ( node , method ):无限的往下找直到找到通过method校验的同级非文本节点,node不能为id,有了这个方法就不用无限的nextSibling啦。

getPreviousSibling ( node ):寻找紧挨的上一个同级非文本节点的节点,与Dom中的previousSibling类似,可以省去判断文本节点的麻烦。

getPreviousSiblingBy ( node , method ):无限的往前找直到找到通过method校验的同级非文本节点,node不能为id。

posted on 2011-02-01 08:55 lau 阅读(1443) 评论(1)  编辑  收藏 所属分类: Web

Feedback

# re: YAHOO.util.Dom之寻找节点(转) 2011-02-01 08:56 lau

http://blog.csdn.net/ilibaba/archive/2009/06/07/4248932.aspx

JavaScript(YUI)扫盲  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: