前言：

前面两章讲了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的事件绑定

Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）的更多相关文章

  1. Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）

    前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...

  2. Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）

    前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...

  3. Dojo初探之2:设置dojoConfig详解，dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式（基于dojo1.11.2）

    Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...

  4. DOM操作（二）对元素的操作（创建，追加，删除）

    1 创建新的 HTML 元素 (节点) var divDom=document.createElement('div'); 2 添加新元素到尾部 element.appendChild(para); ...

  5. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  6. ui自动化之selenium操作（二）定位元素-简单操作

    1. 将浏览器最大化 这里拿chrome举例,但是我在执行的时候一直报错,被坑了好久; 解决办法: 这是因为chromedriver是和chrome一一对应的,不兼容的版本就会报错: 所有chrome ...

  7. html热力图的操作(点击图片的不同位置操作不同的事件)适合说明文档

    页面核心代码 <div class="first_top"> <div class="back"> <img src=" ...

  8. JS DOM操作（四） Window.docunment对象——操作内容

    操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...

  9. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

随机推荐

  1. iOS·UIKit框架注解 & Foundation

  2. 搜索结果Refinement 行为总结之 multi-selection refinement

    几乎所有的购物网站的搜索结果页面都会提供refinement (filtering) 给用户去过滤产品,以便能更快找到自己想要的产品.(做的都是国外的项目,不太清楚这个功能地道的中文名是什么.所以就暂 ...

  3. 图解WebGL&Three.js工作原理

    “哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...

  4. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  5. tomcat的环境搭建

    tomcat搭建过程还是比较简单的,只需要安装好jdk,然后配置好环境变量,最后把tomcat安装上开启就可以了. 首先下载jdk,然后把下载下来的jdk放到/usr/local下,然后用rpm -i ...

  6. MVC框架中，遇到 [程序集清单定义与程序集引用不匹配]怎么办？

    项目里有一个WinForm程序,它需要使用一套第三方控件.而我的机器上存有这套控件的两种版本(一个是源码版,一个是演示版).结果经常出现“程序集清单定义与程序集引用不匹配的问题”的异常.最要命的是有时 ...

  7. MySQL用户管理和权限设置

    用户管理 mysql>use mysql; 查看 mysql> select host,user,password from user ; 创建 mysql> create user ...

  8. 常用的CI笔记

    1． thinkphp 封装好的$this->success(),就直接实现成功跳转,$this->error(),错误跳转.CI有show_error(),但是却不能直接实现跳转,所以需 ...

  9. java之 Timer 类的使用以及深入理解

    最近一直在看线程知识,然后看到Timer定时器使用了线程实现的定时功能,于是了解了解: 本文 从Time类的使用和源码分析两个方面讲解: 1---Timer类使用 2---源码分析 1.Time类使用 ...

  10. 如何选择版本控制系统 ---为什么选择Git版本控制系统

    版本控制系统 "代码"作为软件研发的核心产物,在整个开发周期都在递增,不断合入新需求以及解决bug的新patch,这就需要有一款系统,能够存储.追踪文件的修改历史,记录多个版本的开 ...