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的事件绑定


posted @ 2016-08-21 14:56  eguid  阅读(643)  评论(0)  编辑  收藏  举报