《Dojo基础5-节点操作》由会员分享，可在线阅读，更多相关《Dojo基础5-节点操作（5页珍藏版）》请在金锄头文库上搜索。
1、Dojo慕础3 -节点操作query使用1. 说明：使用query方法町以通过id ,标签名，类，样式来査询节点。2. 方法dojo.query(/*String*/ query,/*String ? | DomNode?*/ root);返冋 nodelist第一个参数是查询条件，第二个参数是查询的节点3 常用css选择符语法语法含义示例*任何元素dojo.query(*)E标签为E的元索dojo.query(div).C标签带何类C的兀素dojo.query(/.baz,/)E.C标签有E且带有类C的元素dojo.query(/zdiv.baz,?)；#ID值为ID的元索dojo.quer
2、y(#quux)；E#ID标签有E且ID值为ID的元素dojo.query(div#ID);A带有属性A的元素dojo.query(/name,/)EA标签为E且带有属性A的元索dojo.query(/zdiv name);A带冇属性A且属性值为V的元素dojo.query (n ame=ztest name);EA=V带有标签E几有属性A属性A的属性是一个含 有空格分隔的列表其中的一个值恰好是V的值dojo.query(,zdiv name=bar 丫)；EAA=V带冇标签E H.冇属性A fl属性A的值是以V开 头的元素dojo.query(zzdiv name2bar 丫)；EA$=,V
3、,带有标签E且有属性A且属性A的值是以V结 尾的元素dojo.query(z/div name$=bar 丫)；EA*=V带有标签E且有属性A且属性A的值包含Vdojo.query(/zdiv name* 二bar 丫)；EF作为元素E的子元素的F元素dojo.query(zzdivspa n);E F作为元素E后代元素的F元素dojo.query(/zE F);E,F两个条件可以用，分开根据两个条件查出的内容 口并到起dojo.query(E,F);4.状态跟踪我们在状态跟踪时通常采用引入变虽的方式实现，但通过css进行状态跟踪状态往 往会更优雅。NodeList1. 说明:NodeList
4、是专为高效操作DOM节点而设计的一个Array的了类。2. NodeList提供的方法：名称说明indexOf(/*DomNode*/)返回NodeList中某个项笫一次岀现的 位置lastlndexOf(/*DomNode*/);返回NodeList中某个项最后一次出现 的位置every(/*Function*/ f)如果NodeList的每一项传入Function 中都返回true贝lj返回truesome(/*Function*/f)如果NodeList的每一项传入Function 中有一个返回true贝!J返回trueforEach(/*Function*/f)将NodeList中的每
5、一项传到Function 中,返回原始的NodeListmap(/*Function*/f)通过函数运行每一项，返凹运行结果组成的NodeListfilter(/*Function*/f)通过函数运行每一项，返1叫符合条件 的 NodeListconcat(/*Any*/item/.)返回添加新项Z后的Listsplice(/*Integer*/ index,/*lnteger*/howManyToDelete,/*Any*/item.)插入删除或替换NodeList中的项,返 回被删除项之后的NodeListslice(/*lnteger*/begin,/*lnteger*/ end )返冋
6、切除对应项Z后的nodeListaddClass(/*String*/Class);为NodeList中的每个节点添加类removeClass(/*String*/Class)为NodeList中的每个节点删除类style(/*String| Object*/ style)设置NodeList中每个节点的样式（见 示例）addContent(/*String*/content,/*Stri ng | In teger*/positi on)为NodeList的每个节点的相对位置加 入字符串,position参数的可选值为 first,last（相对于每个节点的父节点町 以理解为节点内）befo
7、rezafter（相对于 节点本身）place(/*String | Node*/queryOrNode,/*String* /position)在参数一的节点斗1放置NodeList中的 每一项，返回放置的项。（移动页血中 的节点）第二个参数参考addContent 的position参数coords()返回NodeList中所有盒子对象的集 合，盒子对象格式为 l:50,t:200,w:300,h:150,x:100,y:3001表示左距浏览器视口的偏移量，t表 示上距浏览器视口的偏移量，w,h分 别对应盒子的宽度和高度，x,y对应 坐标的绝对位置。orphan(/*String?*/ f
8、ilter)根据filter参数移除DOM节点并返回 移除节点的NodeListadopt(/*String | array | DomNode*/)相对于NodeList的第一个节点插入Dom节点（移动界而节点）connect(/*String*/EventName,/*Object*/context)/*String*/funcName为NodeList中的每个项添加事件侦听 器。instantiate(/*String | Object*/declareClass, /*Object?*/properties)为批量实例化部件提供便利。假设 NodeList包含许多源节点,该方法尝 试将
9、他们解析为由declaredClass定义 的部件类，同时传入properties参数 提供的部件属性。示例：var objs= dojo.query(”div”,”d”)；var newobjs= objs.filter(function(node) if(node.innerHTML= = *) alert(node.innerHTML);else alert(node.innerHTML+ no); return node;)；alert(newobjs.le ngth);NodeList.style()示例var o=new Object(); o.background(3olor=
10、red; objs.style( backgroundColor= red);objs.style(o);/两种赋值方式均可connect方法示例objs.co nnect(”on click,f un cti on( )alert(s);三、与数组方法类似的方法1. 相关方法：indexOfJastl ndexOf,every,some,foreach,map,filter2. 创建NodeList的几种方法创建一个空NodeListvar no delist =new dojo.NodeList();创建一个包含已知节点的N odeListvar no delist =new dojo.N
11、odeList(a,b,c); 将节点转化成NodeListvar array=a,b,c;var no delist =new dojo.NodeList(); nodelist.concat(a);注意：必须通过以上方式创建NodeList否则会出现错课3. 连缀nodeList结果map返向节点处理后的NodeListfilter返回符合条件的NodeListvar objs= dojo.query(”div”,”d”);var newobjs= objs.filter(function(node) if(node.innerHTML= = ,H) alert(node.innerHTM
12、L);elsealert(node.innerHTML+ no); return no de;)；alert (newobjsength);foreach返回原始的nodeList4. 字符串试函数参数objs.forEach(alert(item.innerHTML)n)/可以避免写完整的包装函数四、操作样式NodeList的style方法实现：var objs= dojo.query(”divTd”)； objs.style(,backgroundColor,J,redn);五、放置节点1在对应节点的相应位置添加字符串 参数/before”是相对于该节点的位置 obj s. addCont
13、ent (” aaan，” before);参数2“first”是相对于该节点的父节点(类似于在节点内部添加) obj s. addContent( aaa /first*)；2在对应节点放置NodeListobjs.place(dojo.query( #cc”),0);3. 移除节点orphan objs.orphan(H#99n);注意：参数1必须是字符串不能冇逗号 移除NodeList中id为99的节点(在界面中移除) objs.orphan(ndiv span);注意两边要有空格4添加节点adopt将节点添加到NodeList中(页面中添加)六、Dom事件的快捷方式obj s. co
14、nn ect(o nclick”,fun ctio n() alert(s); objs.onclick(function() alert(s777*);七、创建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页面中分离出来。我们可以使用add为一组DOM节点添加行为，但在调用Apply Z前这些行为不会发生。2.行为对象的值：键值说明Selector(String)Object对象中包含键值对，用于将Dom事 件名或特殊的found关键字映射到事 件处理程序或(发布/预计模式中的) 主题名称。Selector(String)Function当匹配选择符的每个节点执行这个 处理程序时，相应的节点作为参数传 入处理程序中。Selector(Stri ng)String匹配选择符的每个节点都会发布这 个
