Dojo基礎(chǔ)5-節(jié)點(diǎn)操作

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

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

3、bar 丫)；eaa=v帶冇標(biāo)簽e h.冇屬性a fl屬性a的值是以v開 頭的元素dojo.query(zzdiv name2bar 丫)；ea$=,v,帶有標(biāo)簽e且有屬性a且屬性a的值是以v結(jié) 尾的元素dojo.query(z/div name$=bar 丫)；ea*=v帶有標(biāo)簽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兩個(gè)條件可以用，分開根據(jù)兩

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

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

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

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

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

9、事件偵聽 器。instantiate(/*string | object*/declareclass, /*object?*/properties)為批量實(shí)例化部件提供便利。假設(shè) nodelist包含許多源節(jié)點(diǎn),該方法嘗 試將他們解析為由declaredclass定義 的部件類，同時(shí)傳入properties參數(shù) 提供的部件屬性。示例：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');三、與數(shù)組方法

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

12、錯(cuò)課3. 連綴nodelist結(jié)果map返向節(jié)點(diǎn)處理后的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. 字符串試函數(shù)參數(shù)objs.foreach(&

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

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

15、s.onclick(function() alert('s777*);七、創(chuàng)建nodelist擴(kuò)展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對(duì)象才可以使用該方法。八、分離行為1.說明：分離行為可以將事件和dom操作從html頁面中分離出來。我們可

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