thinking

          one platform thousands thinking

          YAHOO.util.Dom之尋找節(jié)點(diǎn)(轉(zhuǎn))

          YAHOO.util.Dom之尋找節(jié)點(diǎn)

          YUI的Dom方法一共有45個(gè),在這里談一下我學(xué)習(xí)過程遇到的問題和經(jīng)驗(yàn),先介紹17個(gè)尋找節(jié)點(diǎn)類型的Dom方法。

          get(el):記得初學(xué)JavaScript的時(shí)候,最先認(rèn)識的兩個(gè)方法就是getElementById和 getElementsByTagName,這兩個(gè)東東也基本上能夠找到大多數(shù)你需要找的東西啦。YUI里的get方法跟getElementById類 似,但是它的能力卻要強(qiáng)很多了,el可以是String、HTMLElement或者Array。

          getElementsBy ( method , tag , root , apply , o , overrides ):這個(gè)會(huì)和getElementsByTagName比較像一點(diǎn)點(diǎn)吧,但是功能差好遠(yuǎn),基本上getElementsBy應(yīng)該可以找到一切你想找的元 素,method是定義一個(gè)校驗(yàn)?zāi)繕?biāo)元素的方法,返回一個(gè)boolean值,tag是目標(biāo)元素的nodeName,root是指在哪個(gè)元素中進(jìn)行尋找,也 可以說成是一個(gè)范圍吧。apply,我必須要說下它。。當(dāng)初它困擾我了半天,YUI給出的解釋是“A function to apply to each element when found ”,可以理解為一個(gè)回調(diào)函數(shù)吧,再看看YUI的代碼,其中有這么一段:

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

          我當(dāng)時(shí)的理解是,因?yàn)樽罱K返回的是一個(gè)節(jié)點(diǎn)的數(shù)組嘛,我就以為執(zhí)行完前邊的校驗(yàn)后得到的結(jié)果再在apply中進(jìn)行一次,也就是我在apply中再對 結(jié)果元素進(jìn)行下一步的節(jié)點(diǎn)尋找,那么最后返回的應(yīng)該是apply執(zhí)行后得到的所有節(jié)點(diǎn)集合。。。可是無論我怎么試,最終返回的都是通過method方法所 得到數(shù)組,并沒有再次通過apply獲得更多的元素,嘿嘿,不要見笑哈,當(dāng)時(shí)就是這么想的。。。后來發(fā)現(xiàn),實(shí)際上不是這樣子,我理解錯(cuò)誤的原因只要就在那 個(gè)batch上,當(dāng)時(shí)的錯(cuò)誤在于,我把batch放進(jìn)getElementsBy里了,那么在batch里邊return后應(yīng)該不會(huì)再繼續(xù)執(zhí)行 return nodes了,但是實(shí)際上這里的Y.Dom.batch(nodes, apply, o, overrides)只是一個(gè)最終的結(jié)果而已,所以return nodes還是會(huì)執(zhí)行的。那么這個(gè)apply的作用在何處呢?其實(shí)作用就是執(zhí)行一次回調(diào)嘛哈,它是可以實(shí)現(xiàn)我之前的想法的,但是不是直接返回的,舉個(gè)例 子:

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

          這是尋找id為content的容器下className為J_tab的節(jié)點(diǎn),那么如果我同時(shí)還需要獲取每個(gè)ul下的所有l(wèi)i節(jié)點(diǎn)該怎么做呢,總不能再來一次循環(huán)吧,當(dāng)然也可以啦,不過要好好利用下YUI吧,那就是讓它獲取ul的同時(shí)獲取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,這樣子就一舉兩得了哈~后邊的作用域和上下文就不多說啦,關(guān)于batch的神奇,下次再說哈,真的很神奇。。。

          getElementBy ( method , tag , root ):這個(gè)就是通過method校驗(yàn)的第一個(gè)元素。

          getElementsByClassName ( className , tag , root , apply , o , overrides ):是通過className進(jìn)行元素尋找,其實(shí)這個(gè)方法是getElementsBy的一個(gè)特殊方法。

          getChildren ( node ):這個(gè)與Dom中的childNode類似。

          getChildrenBy ( node , method ):通過method方法過濾子元素,注意參數(shù)的順序以及node不可為id。

          getFirstChild ( node ):尋找第一個(gè)子元素,跟Dom中的firstChild有些類似。

          getFirstChildBy ( node , method ):尋找第一個(gè)通過method校驗(yàn)的子元素,注意參數(shù)的順序以及node不可為id。其實(shí)這個(gè)等同于getChildrenBy得到的第一個(gè)元素。

          getLastChild ( node ):尋找最后一個(gè)子元素,與Dom中的lastChild有些類似。

          getLastChildBy ( node , method ):與getFirstChildBy相反,倒著尋找。

          getAncestorBy ( node , method ):尋找父節(jié)點(diǎn),可以無限的往上級尋找,直到找到為止,node不能為id,跟Dom中的parentNode類似,不過這里不用反復(fù)的parentNode啦。

          getAncestorByClassName ( node , className ):通過className尋找父節(jié)點(diǎn),是getAncestorBy的一個(gè)特殊方法。

          getAncestorByTagName ( node , tagName ):通過tagName尋找父節(jié)點(diǎn),是getAncestorBy的一個(gè)特殊方法。

          getNextSibling ( node ):尋找緊挨的下一個(gè)同級非文本節(jié)點(diǎn)的節(jié)點(diǎn),與Dom中的nextSibling類似,省去了判斷文本節(jié)點(diǎn)麻煩。

          getNextSiblingBy ( node , method ):無限的往下找直到找到通過method校驗(yàn)的同級非文本節(jié)點(diǎn),node不能為id,有了這個(gè)方法就不用無限的nextSibling啦。

          getPreviousSibling ( node ):尋找緊挨的上一個(gè)同級非文本節(jié)點(diǎn)的節(jié)點(diǎn),與Dom中的previousSibling類似,可以省去判斷文本節(jié)點(diǎn)的麻煩。

          getPreviousSiblingBy ( node , method ):無限的往前找直到找到通過method校驗(yàn)的同級非文本節(jié)點(diǎn),node不能為id。

          posted on 2011-02-01 08:55 lau 閱讀(1467) 評論(1)  編輯  收藏 所屬分類: Web

          Feedback

          # re: YAHOO.util.Dom之尋找節(jié)點(diǎn)(轉(zhuǎn)) 2011-02-01 08:56 lau

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

          JavaScript(YUI)掃盲  回復(fù)  更多評論   

          主站蜘蛛池模板: 广灵县| 永川市| 阳江市| 满城县| 汶上县| 平舆县| 项城市| 巩留县| 南丹县| 城市| 杭锦后旗| 夏邑县| 雅江县| 都江堰市| 溧水县| 侯马市| 曲沃县| 嘉义县| 镇巴县| 新邵县| 定安县| 金华市| 和林格尔县| 玛纳斯县| 兴业县| 如东县| 佛山市| 普兰店市| 壤塘县| 芦溪县| 西昌市| 乌拉特中旗| 崇义县| 雷山县| 台安县| 团风县| 温泉县| 大连市| 宝应县| 仪征市| 乐清市|