zoukankan      html  css  js  c++  java
  • Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)

    前言:

    前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置。

    dojo的所有js都是符合AMD规范进行异步加载的:http://blog.csdn.net/eguid_1/article/details/52083016

    并且详细阐述了dojo的config设置:http://blog.csdn.net/eguid_1/article/details/52092016

    缀述:

    这章开始真正讲解dojo的所有基本操作,包含dom、query、event(鼠标/键盘事件)、request(请求)、动画、反射(dojo实现JS的aop)等等操作。

    本章内容简介

    本章主要讲解dojo的dom操作、query操作和domConstruct元素位置操作

    基于dojo的DOM操作

    dojo的dom操作分为query操作和dom操作和domConstruct元素位置操作三种

    1、dom操作

    注:前面已经讲过了dojo是基于AMD规范的,所有引入JS的操作都是通过require异步加载来完成。

    (1)引入dom模块


    需要require一下dojo的dom模块,dojo的这个dom就是一个符合AMD规范的JS直接对象
    var dom = require("dojo/dom");

    (2)dom操作

     注:引入dojo的domReady!模块可以让该方法在页面加载完成后再运行。
    require(["dojo/domReady!"], function() {
    //设置标签内容
        function setText(node, text) {
            node = dom.byId(node);
            node.innerHTML = text;
        }
    //找到id是one的标签
        var one = dom.byId("one");
        setText(one, "One has been set");
        setText("two", "Two has been set as well");
    
    });

    (3)页面

     <head>
        <title>domTest</title>
        <meta charset="utf-8">
        <script src="dojo/dojo.js">
        </script>
        <script src="js/view/domTest.js"></script>
    </head>
    <body>
        <ul id="list">
            <li id="one">One</li>
            <li id="two">Two</li>
            <li id="three">Three</li>
            <li id="four">Four</li>
            <li id="five">Five</li>
        </ul></body>

    2、query操作

    query模块可以通过标签的名字或者id或者class进行查找,与jquery中的的$()用法比较像
    再使用query之前需要先引入query模块

    (1)引入query模块

    dojo的query与jquery中的$()的用法类似,可以作为参考

    var query = require("dojo/query");

    (2)query操作


    注:引入的array模块是为了方便操作数组(比如这里使用array模块的forEach循环)
    dom-class模块是操作页面标签class属性的模块,当然我们一般用不到这个模块,因为通过query获取到的dojo对象也是可以直接进行addClass()的class增加删除操作的。
    //domReady!用来延后在页面加载完成后加载该块
    require(["dojo/_base/array", "dojo/domReady!"], function(arrayUtil) {
        // 检索 ID是 "list"的标签
        var list = query("#list");//通过id查找
        console.info(list);
        //检索class是italic的标签
        list = query(".italic");//通过class查找
        console.info(list);
        //检索li标签中class是even的element
        list = query("li.even");//通过标签+class查找
        console.info(list);
        //检索list元素下所有class是odd的标签
        query(".odd", dom.byId("list"));
        //检索li标签下的全部a标签
        var allA = query("li a");
        //item为遍历对象,index为索引
        arrayUtil.forEach(list, function(item, index) {
            console.info(item + "," + index);
        });
        console.info("end");
    });
    
    //使用domClass修改标签的class
    require(["dojo/_base/array", "dojo/dom-class", "dojo/domReady!"], function(arrayUtil, domClass) {
        arrayUtil.forEach();
        var node = query(".odd");
        domClass.add(node, "red");
    });
    当然还可以使用query获取到的dojo对象直接操作dom的class增加和删除
    require("dojo/domReady!"], function(query) {
        // 给class是bold的标签添加一个名为red的新class,并移除原本的class
        query(".bold").addClass("red").removeClass("bold");
    
        query(".even").addClass("blue").removeClass("even");
    });
    除了上述的dom操作,query获取的dojo对象还有插入新元素的操作:
    query(".red") // 检索查class是blod的标签
            .clone() // 拷贝一个相同的标签
            .prepend('<span class="emoticon happy">happy!dojo!</span>') // 在这个标签内部插入新的元素
            .appendTo(".blue"); //把生成的新标签插入到class是bulue标签的内部



    (3)页面

    <head>
        <title>query操作测试</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/queryTest.css">
        <script src="dojo/dojo.js"></script>
        <script src="js/view/queryTest.js"></script>
    </head>
    
    <body>
        <ul id="list">
            <li class="odd">
                <div class="bold">
                    <a class="odd">Odd</a>
                </div>
            </li>
            <li class="even">
                <div class="italic">
                    <a class="even">Even</a>
                </div>
            </li>
            <li class="odd">
                <a class="odd">Odd</a>
            </li>
            <li class="even">
                <div class="bold">
                    <a class="even">Even</a>
                </div>
            </li>
            <li class="odd">
                <div class="italic">
                    <a class="odd">Odd</a>
                </div>
            </li>
            <li class="even">
                <a class="even">Even</a>
            </li>
        </ul>


    3、domConstruct元素位置操作

    (1)引入domConstruct

    var domConstruct=require("dojo/dom-construct")

     (2)domConstruct位置操作

    domConstruct.place(操作的元素, 父元素, "位置");位置:first,before,after


    例如:把id为three的标签放到list的第一个位置

    var list = dom.byId("list"),
       three = dom.byId("three");
       domConstruct.place(three, list, "first");

     把three放到two之前

     var two = dom.byId("two"),
       three = dom.byId("three");
    
        domConstruct.place(three, two, "before");
    把three放到four之后

      var four = dom.byId("four"),
           three = dom.byId("three");
           domConstruct.place(three, four, "after");

    (3)domConstruct父元素删除 子元素

     function destroyFirst() {
                var list = dom.byId("list"),
                    items = list.getElementsByTagName("li");
                if (items.length) {
                    //清除某个元素
                    domConstruct.destroy(items[0]);
                }
            }
    
            function destroyAll() {
                //清空父类下的子元素
                domConstruct.empty("list");
            }

    该页面与query示例页面相同,不在重复贴出


    下一章将详述dojo的事件绑定


  • 相关阅读:
    ps_基于2020的官方教程
    杂记_好玩的
    linux _文件目录与权限
    levelDb笔记
    《好学的C++ 第2版》 第9章 一些高级编程技术
    《好学的C++ 第2版》 第8章 文件-电子存储
    《好学的C++ 第2版》 第7章 字符串--分析文本
    《好学的C++ 第2版》 第6章 指针--我知道数据在哪里
    《好学的C++ 第2版》 第5章 数组--都给我排好队
    《好学的C++ 第2版》 第4章 函数--分工与合作
  • 原文地址:https://www.cnblogs.com/eguid/p/6821601.html
Copyright © 2011-2022 走看看