Dojo基礎5-節(jié)點操作

1、dojo慕礎3 -節(jié)點操作query使用1. 說明：使用query方法町以通過id ,標簽名，類，樣式來査詢節(jié)點。2. 方法dojo.query(/*string*/ query,/*string ? | domnode?*/ root);返冋 nodelist第一個參數是查詢條件，第二個參數是查詢的節(jié)點3 常用css選擇符語法語法含義示例*任何元素dojo.query("*")e標簽為e的元索dojo.query("div").c標簽帶何類c的兀素dojo.query(/.baz,/)e.c標簽有e且?guī)в蓄恈的元素dojo.query(/zdiv.ba

2、z,?)；#id值為id的元索dojo.query("#quux)；e#id標簽有e且id值為id的元素dojo.query("div#id");a帶有屬性a的元素dojo.query(/name,/)ea標簽為e且?guī)в袑傩詀的元索dojo.query(/zdiv name");a®帶冇屬性a且屬性值為v的元素dojo.query ("n ame=ztest name");ea='v'帶有標簽e幾有屬性a屬性a的屬性是一個含 有空格分隔的列表其屮的一個值恰好是v的值dojo.query(,zdiv name=

3、bar 丫)；eaa=v帶冇標簽e h.冇屬性a fl屬性a的值是以v開 頭的元素dojo.query(zzdiv name2bar 丫)；ea$=,v,帶有標簽e且有屬性a且屬性a的值是以v結 尾的元素dojo.query(z/div name$=bar 丫)；ea*=v帶有標簽e且有屬性a且屬性a的值包含vdojo.query(/zdiv name* 二'bar 丫)；e>f作為元素e的子元素的f元素dojo.query(zzdiv>spa n");e f作為元素e后代元素的f元素dojo.query(/ze f");e,f兩個條件可以用，分開根據兩

4、個條件查出的內容 口并到起dojo.query("e,f");4.狀態(tài)跟蹤我們在狀態(tài)跟蹤時通常采用引入變雖的方式實現，但通過css進行狀態(tài)跟蹤狀態(tài)往 往會更優(yōu)雅。nodelist1. 說明:nodelist是專為高效操作dom節(jié)點而設計的一個array的了類。2. nodelist提供的方法：名稱說明indexof(/*domnode*/)返回nodelist中某個項笫一次岀現的 位置lastlndexof(/*domnode*/);返回nodelist中某個項最后一次出現 的位置every(/*function*/ f)如果nodelist的每一項傳入function 中

5、都返回true貝lj返回truesome(/*function*/f)如果nodelist的每一項傳入function 中有一個返回true貝!j返回trueforeach(/*function*/f)將nodelist中的每一項傳到function 中,返回原始的nodelistmap(/*function*/f)通過函數運行每一項，返凹運行結果組成的nodelistfilter(/*function*/f)通過函數運行每一項，返1叫符合條件 的 nodelistconcat(/*any*/item/.)返回添加新項z后的listsplice(/*integer*/ index,/*lnte

6、ger*/howmanytodelete,/*any*/item.)插入刪除或替換nodelist中的項,返 回被刪除項之后的nodelistslice(/*lnteger*/begin,/*lnteger*/ end )返冋切除對應項z后的nodelistaddclass(/*string*/class);為nodelist中的每個節(jié)點添加類removeclass(/*string*/class)為nodelist中的每個節(jié)點刪除類style(/*string| object*/ style)設置nodelist中每個節(jié)點的樣式（見 示例）addcontent(/*string*/conte

7、nt,/*stri ng | in teger*/positi on)為nodelist的每個節(jié)點的相對位置加 入字符串,position參數的可選值為 first,last（相對于每個節(jié)點的父節(jié)點町 以理解為節(jié)點內）beforezafter（相對于 節(jié)點本身）place(/*string | node*/queryornode,/*string* /position)在參數一的節(jié)點斗1放置nodelist中的 每一項，返回放置的項。（移動頁血中 的節(jié)點）第二個參數參考addcontent 的position參數coords()返回nodelist中所有盒子對象的集 合，盒子對象格式為 l:5

8、0,t:200,w:300,h:150,x:100,y:3001表示左距瀏覽器視口的偏移量，t表 示上距瀏覽器視口的偏移量，w,h分 別對應盒子的寬度和高度，x,y對應 坐標的絕對位置。orphan(/*string?*/ filter)根據filter參數移除dom節(jié)點并返回 移除節(jié)點的nodelistadopt(/*string | array | domnode*/)相對于nodelist的第一個節(jié)點插入dom節(jié)點（移動界而節(jié)點）connect(/*string*/eventname,/*object*/context)/*string*/funcname為nodelist中的每個項添加

9、事件偵聽 器。instantiate(/*string | object*/declareclass, /*object?*/properties)為批量實例化部件提供便利。假設 nodelist包含許多源節(jié)點,該方法嘗 試將他們解析為由declaredclass定義 的部件類，同時傳入properties參數 提供的部件屬性。示例：var objs= dojo.query(”div”,”d”)；var newobjs= objs.filter(function(node) if(node.innerhtml= = '*") alert(node.innerhtml);els

10、e alert(node.innerhtml+ "no"); return node;)；alert(newobjs.le ngth);nodelist.style()示例var o=new object(); o.background(3olor= "red" objs.style( backgroundcolor= 'red');objs.style(o);/兩種賦值方式均可connect方法示例objs.co nnect(”on click",f un cti on( )alert('s');三、與數組方法

11、類似的方法1. 相關方法：indexofjastl ndexof,every,some,foreach,map,filter2. 創(chuàng)建nodelist的幾種方法創(chuàng)建一個空nodelistvar no delist =new dojo.nodelist();創(chuàng)建一個包含已知節(jié)點的n odelistvar no delist =new dojo.nodelist(a,b,c); 將節(jié)點轉化成nodelistvar array=a,b,c;var no delist =new dojo.nodelist(); nodelist.concat(a);注意：必須通過以上方式創(chuàng)建nodelist否則會出現

12、錯課3. 連綴nodelist結果map返向節(jié)點處理后的nodelistfilter返回符合條件的nodelistvar objs= dojo.query(”div”,”d”);var newobjs= objs.filter(function(node) if(node.innerhtml= = ,h) alert(node.innerhtml);elsealert(node.innerhtml+ "no"); return no de;)；alert (newobjsength);foreach返回原始的nodelist4. 字符串試函數參數objs.foreach(&

13、quot;alert(item.innerhtml)n)/可以避免寫完整的包裝函數四、操作樣式nodelist的style方法實現：var objs= dojo.query(”divtd”)； objs.style(,'backgroundcolor,j,redn);五、放置節(jié)點1在對應節(jié)點的相應位置添加字符串 參數/before”是相對于該節(jié)點的位置 obj s. addcontent (” aaan，” before");參數2“first”是相對于該節(jié)點的父節(jié)點(類似于在節(jié)點內部添加) obj s. addcontent(" aaa" /'f

14、irst'*)；2在對應節(jié)點放置nodelistobjs.place(dojo.query(" #cc”),0);3. 移除節(jié)點orphan objs.orphan(h#99n);注意：參數1必須是字符串不能冇逗號 移除nodelist中id為99的節(jié)點(在界面中移除) objs.orphan(ndiv > span");注意兩邊要有空格4添加節(jié)點adopt將節(jié)點添加到nodelist中(頁面中添加)六、dom事件的快捷方式obj s. co nn ect("o nclick”,fun ctio n() alert('s'); obj

15、s.onclick(function() alert('s777*);七、創(chuàng)建nodelist擴展dojo.extend(dojo.nodelist,aa:f un ctio n() return this.map(mreturn item.innerhtml");)；var objs= dojo.query(“div”,”d”)；var ss= objs.aa(); alert(ss1);為nodelist添加aa方法注意：只有在添加aa方法代碼后得到的nodelist對象才可以使用該方法。八、分離行為1.說明：分離行為可以將事件和dom操作從html頁面中分離出來。我們可

16、以使用add為一組dom節(jié)點添加行為，但在調用apply z前這些行為不會發(fā)生。2.行為對象的值：鍵值說明selector(string)object對象中包含鍵值對，用于將dom事 件名或特殊的found關鍵字映射到事 件處理程序或(發(fā)布/預計模式屮的) 主題名稱。selector(string)function當匹配選擇符的每個節(jié)點執(zhí)行這個 處理程序時，相應的節(jié)點作為參數傳 入處理程序中。selector(stri ng)string匹配選擇符的每個節(jié)點都會發(fā)布這 個字符串指定的主題名，而一幾，每個 節(jié)點都將被傳遞給預定改主題的處 理程序。3.使用引入：dojo.require("dojo.behavior");使用：dojo.behavior.add(“input": function(node)為匹配節(jié)點加樣式 dojo.style( no de, background: ”red”),“div”： on mouseover: fun cti on( evt) /alert(nss1u)，onclick: vdtdg/behavior/example/click", /found是一個