dojo 中的增删改查

1.获取DOM节点

dojo.byId(param)param:可以是节点ID名称,也可以是一个节点

2.添加DOM节点

dojo.create(node,nodeObject,nodeRelation,nodeLocation) 

node:节点名称

nodeObject:节点属性{innerHTML:'',className:'',style:{fontWeight:'bold'}}

nodeRelation:节点的父类或者兄弟类

nodeLocation:与nodeRelation节点的相对位置,(first,before,after,last(default))

3.插入DOM节点

dojo.place(node,relationNode,location)

node:安插节点

relationNode:参照节点

location:相对位置(first,before,after,last(default))

4.删除DOM节点

dojo.destory()删除该节点以及其子节点

dojo.empty() 删除该节点

5.批量操作

Dojo查询,返回值为数组

dojo.query("#id") [index]根据ID

dojo.query(".class") [index]根据class

限定查询

dojo.query("#list #one")查询整个DOM树

dojo.query("#one",dojo.byId("list"))在限定条件里查询(尽可能使用限定条件查询,提高效率)

其他查询

传入参数为:标签名和class名dojo.query("a.one")

6.NodeList

dojo.query()返回的结果集就是NodeList

常用方法:

1.forEach(function(node,index,nodelist){})遍历

2.style,replaceClass,addClass,place,empty等,这些方法均返回nodeList,可供串联使用

dojo.query('#red').removeClass('red').addClass('black')

3.connect 连接DOM事件,不适用包含大量节点的情况

<!DOCTYPEhtml> 

<html>

     <head>

           <metacharset="UTF-8">

           <title></title>

           <scriptsrc="dojo/dojo.js"djConfig="parseOnLoad: true"></script>

           <script>

                require(["dojo/dom","dojo/dom-construct","dojo/domReady!"],

                      function(dom,domconstruct) {

//增加

                           varul=dom.byId("ul");

                           domconstruct.create("li", {

                                 innerHTML:"six",

                                 className:"seven"

                           }, ul,"after");

//删除

                           domconstruct.destroy("divs");

//查询     

varliList=     dojo.query(".li");

          for(vari=0;i<liList.length;i++){

                console.log(liList[i].innerHTML);

           }          

                      });

           </script>

     </head>

     <body>

           <divid="divs">my name divs</div>

           <ulid="ul">

                      <li class="li">sdsdadasd</li>

                      <li class="li">wwwwww</li>

                      <li class="li">aaaaaa</li>

           </ul>

     </body>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容