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操作
（1）引入dom模块
var dom = require("dojo/dom");
（2）dom操作
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操作
（1）引入query模块
var query = require("dojo/query");
（2）query操作
//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");
}
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版本）的更多相关文章
- Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）
前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...
- Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- Dojo初探之2:设置dojoConfig详解，dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式（基于dojo1.11.2）
Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...
- DOM操作（二）对元素的操作（创建，追加，删除）
1 创建新的 HTML 元素 (节点) var divDom=document.createElement('div'); 2 添加新元素到尾部 element.appendChild(para); ...
- jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
- ui自动化之selenium操作（二）定位元素-简单操作
1. 将浏览器最大化 这里拿chrome举例,但是我在执行的时候一直报错,被坑了好久; 解决办法: 这是因为chromedriver是和chrome一一对应的,不兼容的版本就会报错: 所有chrome ...
- html热力图的操作(点击图片的不同位置操作不同的事件)适合说明文档
页面核心代码 <div class="first_top"> <div class="back"> <img src=" ...
- JS DOM操作（四） Window.docunment对象——操作内容
操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...
- jQuery-对标签元素 文本操作-属性操作-文档的操作
一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...
随机推荐
- 使用CSharp编写Google Protobuf插件
什么是 Google Protocol Buffer? Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 ...
- [视频]物联网&集成系统中的物联交互、数据存储、效果展示形成快速解决方案。附：ServerSuperIO 3.6.2 版本发布。
ServerSuperIO v3.6.2版本更新内容: 设备驱动与实时库对接的Tag配置与OPC Client读取数据的配置统一用一个配置文件. 设备驱动继承DeviceDynamic接口的子类支持存 ...
- effective c++ 思维导图
历时两个多月的时间,终于把effective c++又复习了一遍,比较慢,看的是英文版,之前看的时候做过一些笔记,但不够详细,这次笔者是从头到尾的翻译了一遍,加了一些标题,先记录到word里面,然后发 ...
- 篇2 安卓app自动化测试-初识python调用appium
篇2 安卓app自动化测试-初识python调用appium --lamecho辣么丑 1.1概要 大家好!我是lamecho(辣么丑),上一篇也是<安卓app自动化测 ...
- bzoj3939 【USACO 2015 FEB GOLD 】cow hopscotch
Description 就像人类喜欢玩"跳房子"的游戏,农民约翰的奶牛已经发明了该游戏的一个变种自己玩.由于笨拙的动物体重近一吨打,牛跳房子几乎总是以灾难告终,但这是没有阻止奶牛几 ...
- npm install fetchmatedata慢的解决办法
最近在开发webpack工程时,第一步npm install这里超级慢,一直停着,显示:"fetchMetadata: sill mapToRegistry uri https://regi ...
- Java AOP (2) runtime weaving 【Java 切面编程 (2) 运行时织入】
接上一篇 Java AOP (1) compile time weaving [Java 切面编程 (1) 编译期织入] Dynamic proxy 动态代理 Befor talking abou ...
- [原创]JS实现数据筛选(each)
做列表的时候,有时候需要按照某些条件进行查询,如班级,分组之类.但是又不想在重新从服务器获取数据,可以进行隐藏
- Java常见快捷键
1.Alt+/ 补充代码 2.shift+d 删除选中代码同时删除空格 3.shift+alt+R 改变所有与选中部分相同的字符串 4.ctrl+S 保存代码 5.ctrl+shift+F 格式化代码 ...
- js 正则表达式验证
验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9 ...