Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基於dojo1.11.2版本）
前言：
前面兩章講了dojo的基本規範和配置，當然這個配置不是必須的，當你有這需求的時候就可以用到dojo的config配置。
綴述：
這章開始真正講解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");
});require("dojo/domReady!"], function(query) {
// 給class是bold的標籤新增一個名為red的新class，並移除原本的class
query(".bold").addClass("red").removeClass("bold");
query(".even").addClass("blue").removeClass("even");
});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"); 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版本）
前言： 前面兩章講了dojo的基本規範和配置，當然這個配置不是必須的，當你有這需求的時候就可以用到dojo的config配置。 綴述： 這章開始真正講解dojo的所有基本操作，包含dom、quer
Protocol Buffer 之 Java 使用（基於Spring Boot 2.x）
開發環境：使用Intellij IDEA + Maven + Spring Boot 2.x + JDK 8 1.在專案的pom.xml檔案下，引入protobuf的Jar開發包依賴；並且可以配置protobuf 的Maven外掛，對編寫的proto檔案編譯成Java檔案。
Redis 客戶端之Redisson 配置使用（基於Spring Boot 2.x）
開發環境：使用Intellij IDEA + Maven + Spring Boot 2.x + JDK 8 1.在專案的pom.xml檔案下，引入Redis和Redisson在Spring Boot 下的相關Jar包依賴。 <properties>
Redis 客戶端之Lettuce配置使用（基於Spring Boot 2.x）
開發環境：使用Intellij IDEA + Maven + Spring Boot 2.x + JDK 8 Spring Boot 從 2.0版本開始，將預設的Redis客戶端Jedis替換問Lett
linux網路程式設計之用socket實現簡單客戶端和服務端的通訊（基於TCP）
一、介紹基於TCP協議通過socket實現網路程式設計常用API 1、讀者如果不是很熟悉，可以先看我之前寫的幾篇部落格，有socket，地址結構的理解，更加方便讀者理解 地址分別是： 2、socket（TCP）程式設計API簡介 1）、socket int s
linux網路程式設計之用socket實現簡單客戶端和服務端的通訊（基於UDP）
1、sendto和recvfrom函式介紹 sendto（經socket傳送資料） 相關函式 send , sendmsg,recv , recvfrom , socket 表頭檔案 #include < sys/types.h >#includ
[區塊鏈]Hyperledger Fabric原始碼（基於v1.0 beta版本）閱讀之樂扣老師解讀系列 （三）BCCSP包之工廠包
核心包之BCCSP（區塊鏈加密服務提供者）包之factory工廠包 首先，我們看其程式碼結構： 主要包含factory工廠包，mocks模擬測試包，加解密關聯包pkcs11、signer簽名包、sw加解密實現包以及工具包utils。 根據整個結構我們對
JavaWeb（三）JSP之3個指令、6個動作、9個內置對象和4大作用域
不用 context 請求 判斷 自定義 except -c 一次 導航欄 前言 前面大概介紹了什麽是JSP，今天我給大家介紹一下JSP的三個指令、6個動作以及它的9大內置對象。接下來我們就直接進入正題 一、JSP的3個指令 JSP指令（directive）是為J
玩玩機器學習3——TensorFlow基礎之Session基本運算、佔位符和變數的使用
通過TensorFlow的矩陣和常量的"加減乘除"運算，講一下Session、變數以及佔位符的使用 目錄 變數的使用 Session建立會話與運算 #session的使用，介紹兩種啟動Session的方式，進行矩陣乘法運算 import tensorf
8086彙編學習之定址方式、資料型別以及幾個資料操作指令
一、and、or指令與應用： 1、描述： and指令：按位與 or指令：按位或 and register value or register value 其按位操作關係與C、C++等是一樣的，無需贅言。 eg:
JSP之3大指令、9大內建物件、4大域物件、動作標籤
Jsp之3大指令、9大內建物件、4大域物件 工程結構： Jsp3大指令： 格式：<%@指令名 屬性名1=”屬性值1” 屬性名2=”屬性值2” %> page指令：主要是告訴jsp引擎如何解析jsp檔案 常用屬性： import 用來
OpenCV3之——影象線性混合操作、陣列加權和addWeighted()函式
線性混合操作是一種典型的二元（兩個輸入）的畫素操作； 計算陣列加權和：addWeighted()函式//函式原型 void addWeighted(InputArray src1,double alpha,InputArray src2,double
PHP常見概念混淆（五）之PHP類常量、靜態屬性和屬性的區別
sta 支持 php5 中英文對照 ext static block 簡介 無法 最近在看手冊的時候發現PHP有好些個坑，一不註意就會掉進去，邊看邊將這些容易混淆的內容記載下來。 tips:看手冊的時候最好中英文對照著看，因為英文手冊上有好些個中文手冊沒有的東西（最新的P
3.2 修改、添加和刪除元素
語句 方法 class 修改 使用方法 刪除 末尾 pan 刪除元素 3.2.1 修改列表元素 motorcycles = [‘honda‘, ‘yamaha‘, ‘suzuki‘] print(motorcycles) motorcycles[0] = ‘ducati‘
第4章：介紹python物件型別/4.1 python的核心資料型別/4.2.1 字串獲取操作、字串合併和重複操作
字串獲取操作 概念：用雙引號或者單引號括起來的一串字元 字串按下標獲取操作 定義字串 >>> S="abcd" 給字串求長度 >>> len(S) 4
[ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
概括的講，View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素，而動態內容指的是在應用程式執行的時候動態建立的內容。給View新增動態內容的方式可歸納為下面幾種： Inline code，小的程式碼片段，如 if 和 foreach 語句。 Html hel
Vue-router（4）之路由傳參、命名路由 和 程式設計式導航
路由傳參 案例：現在需要展示一個電影列表頁，點選每一部電影，會跳轉到該部電影詳情頁（跳轉時攜帶type和id） 程式碼實現（未攜帶type）： index.js import Vue from 'vue' // 1. 匯入和安裝 import VueRouter from 'vue-ro
Python學習手冊之數據封裝、類方法和靜態方法
tle tro 變量 無法 code att span method 私有 在上一篇文章中，我們介紹了 Python 的內部方法、操作符重載和對象生命周期，現在我們介紹 Python 的數據封裝、類方法和靜態方法。查看上一篇文章請點擊：https://www.cnblogs
線性代數之——克拉默法則、逆矩陣和體積
1. 克拉默法則 這部分我們通過代數方法來求解 \(Ax=b\)。 用 \(x\) 替換單位矩陣的第一列，然後再乘以 \(A\)，我們得到一個第一列為 \(b\) 的矩陣，而其餘列則是從矩陣 \(A\) 中對應列直接拷貝過來的。 利用行列式的乘法法則，我們有 \[|A|(x_1)=|B_1|\]
Java檔案、輸入流和輸出流常用操作
/** * 對檔案輸入流的處理 */ private static void InputStreamOps() { File file = new File("/ho