前言：

前面两章讲了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直接对象
  1. var dom = require("dojo/dom");

（2）dom操作

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

（3）页面

  1.  <head>
  2.     <title>domTest</title>
  3.     <meta charset="utf-8">
  4.     <script src="dojo/dojo.js">
  5.     </script>
  6.     <script src="js/view/domTest.js"></script>
  7. </head>
  8. <body>
  9.     <ul id="list">
  10.         <li id="one">One</li>
  11.         <li id="two">Two</li>
  12.         <li id="three">Three</li>
  13.         <li id="four">Four</li>
  14.         <li id="five">Five</li>
  15.     </ul></body>

2、query操作

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

（1）引入query模块

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

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

（2）query操作


注：引入的array模块是为了方便操作数组（比如这里使用array模块的forEach循环）
dom-class模块是操作页面标签class属性的模块，当然我们一般用不到这个模块，因为通过query获取到的dojo对象也是可以直接进行addClass()的class增加删除操作的。
  1. //domReady!用来延后在页面加载完成后加载该块
  2. require(["dojo/_base/array", "dojo/domReady!"], function(arrayUtil) {
  3.     // 检索 ID是 "list"的标签
  4.     var list = query("#list");//通过id查找
  5.     console.info(list);
  6.     //检索class是italic的标签
  7.     list = query(".italic");//通过class查找
  8.     console.info(list);
  9.     //检索li标签中class是even的element
  10.     list = query("li.even");//通过标签+class查找
  11.     console.info(list);
  12.     //检索list元素下所有class是odd的标签
  13.     query(".odd", dom.byId("list"));
  14.     //检索li标签下的全部a标签
  15.     var allA = query("li a");
  16.     //item为遍历对象，index为索引
  17.     arrayUtil.forEach(list, function(item, index) {
  18.         console.info(item + "," + index);
  19.     });
  20.     console.info("end");
  21. });
  22.  
  23. //使用domClass修改标签的class
  24. require(["dojo/_base/array", "dojo/dom-class", "dojo/domReady!"], function(arrayUtil, domClass) {
  25.     arrayUtil.forEach();
  26.     var node = query(".odd");
  27.     domClass.add(node, "red");
  28. });

当然还可以使用query获取到的dojo对象直接操作dom的class增加和删除

  1. require("dojo/domReady!"], function(query) {
  2.     // 给class是bold的标签添加一个名为red的新class，并移除原本的class
  3.     query(".bold").addClass("red").removeClass("bold");
  4.  
  5.     query(".even").addClass("blue").removeClass("even");
  6. });

除了上述的dom操作，query获取的dojo对象还有插入新元素的操作：

  1. query(".red") // 检索查class是blod的标签
  2.         .clone() // 拷贝一个相同的标签
  3.         .prepend('<span class="emoticon happy">happy!dojo!</span>') // 在这个标签内部插入新的元素
  4.         .appendTo(".blue"); //把生成的新标签插入到class是bulue标签的内部

（3）页面

  1. <head>
  2.     <title>query操作测试</title>
  3.     <meta charset="utf-8">
  4.     <link rel="stylesheet" type="text/css" href="css/queryTest.css">
  5.     <script src="dojo/dojo.js"></script>
  6.     <script src="js/view/queryTest.js"></script>
  7. </head>
  8.  
  9. <body>
  10.     <ul id="list">
  11.         <li class="odd">
  12.             <div class="bold">
  13.                 <a class="odd">Odd</a>
  14.             </div>
  15.         </li>
  16.         <li class="even">
  17.             <div class="italic">
  18.                 <a class="even">Even</a>
  19.             </div>
  20.         </li>
  21.         <li class="odd">
  22.             <a class="odd">Odd</a>
  23.         </li>
  24.         <li class="even">
  25.             <div class="bold">
  26.                 <a class="even">Even</a>
  27.             </div>
  28.         </li>
  29.         <li class="odd">
  30.             <div class="italic">
  31.                 <a class="odd">Odd</a>
  32.             </div>
  33.         </li>
  34.         <li class="even">
  35.             <a class="even">Even</a>
  36.         </li>
  37.     </ul>

3、domConstruct元素位置操作

(1)引入domConstruct

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

(2)domConstruct位置操作

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

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

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

把three放到two之前

  1.  var two = dom.byId("two"),
  2.    three = dom.byId("three");
  3.  
  4.     domConstruct.place(three, two, "before");

把three放到four之后

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

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

  1.  function destroyFirst() {
  2.             var list = dom.byId("list"),
  3.                 items = list.getElementsByTagName("li");
  4.             if (items.length) {
  5.                 //清除某个元素
  6.                 domConstruct.destroy(items[0]);
  7.             }
  8.         }
  9.  
  10.         function destroyAll() {
  11.             //清空父类下的子元素
  12.             domConstruct.empty("list");
  13.         }

该页面与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. MAC Mysql 重置密码

    使用mac电脑,当mysql登录密码忘记时,需要重置密码.步骤如下: 1. 关闭当前正在运行的mysql进程. A.进入"偏好设置",选择mysql, 再选"stop m ...

  2. 简谈-Python的输入、输出、运算符、数据类型转换

    输出: 格式化输出: 看到了 % 这样的操作符,这就是Python中格式化输出. 换行输出: 在输出的时候,如果有 \n 那么,此时 \n 后的内容会在另外一行显示 输入: 在python2.7当中, ...

  3. 篇3 安卓app自动化测试-搞定界面元素

    篇3                 安卓app自动化测试-搞定界面元素 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试>的第三 ...

  4. （知识点）JavaScript继承

    1)原型链 ①原型链示例 function Shape() { this.name = 'shape'; this.toString = function(){ return this.name; } ...

  5. WPF 杂谈——资源文件

    编写一个应用难免要用到WPF本身的控件.不管是WinForm还是网页都会有自己的控件.只是在写法和用法上有所不同而以.而控件命名却离不开那几个单词.所以不用担心判断不出来哪个是按扭,哪个是文本框.举个 ...

  6. C++随机数rand(), srand()

    c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...

  7. css写出三角形（兼容IE）

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  8. Maven的pom.xml配置文件详解

    Maven简述 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具.由于 Mav ...

  9. 2016年BAT公司常见的Web前端面试题整理

    1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined ...

  10. percona-xtrabackup安装

    二进制包安装(推荐安装方式,不用安装依赖包,非常方便): 1.下载安二进制包:      wget https://www.percona.com/downloads/XtraBackup/Perco ...