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。