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。