Dojo基本DOM操作函數記錄打賞

最近接觸dojo,發現dojo很強大了,但沒有系統學習過dojo,用起來還是很吃力,譬如不知道基礎的dom操作等,都得找文檔臨時學習。總體來說,dojo目前的寫法類似于extjs,但又不局限于extjs之類的框架。下面分享一下基礎的dom操作函數及說明。

基本的DOM操作只是用到了dojo的核心文件.使用dojo.query將返回一個匹配到的節點數組dojo.Nodelist, 這個數組內建了一些常用的方法. 可以操作DOM

使用dojo的方法:

dojo.ready(function(){
	//TODO
});

TODO部分實現你想要的dojo操作。

獲取元素節點:

dojo.byId("demo"); //獲取ID為demo的元素
dojo.query("#demo"); //獲取ID為demo的元素
dojo.query(".demo"); //獲取所有class為demo的元素
dojo.query(".demo > li"); //獲取class為demo的元素中, 所有直接子集li元素
dojo.query("input[name='demo']"); //獲取擁有name屬性,且屬性值為demo的input元素
dojo.query(".demo", dojo.byId("p_demo")); //從id為p_demo的元素中獲取所有class為demo的元素

創建元素節點:

dojo.create("li", {
	id:"demo",
	className:"deLeGemo",
	innerHTML:"create node",
	style:{
		"color":"red",
		"fontWeight":"bold"
	}
}, refNode, "before");
 
dojo.create(str, attrs, refNode, pos);

pos有7個可用取值:
1. [null] 新創建的元素將作為refNode的子元素, 且添加到refNode中最后的位置
2. [before] 新創建的元素將作為refNode的同輩元素, 且位于refNode的前邊
3. [after] 新創建的元素將作為refNode的同輩元素, 且位于refNode的后邊
4. [only] 新創建的元素將取代父元素內所有子元素, 添加到refNode內部
5. [replace] 新創建的元素將直接替換點父元素
6. [first] 新創建的元素將作為refNode的子元素, 并添加到所有子元素的最前邊
7. [last] 新創建的元素將作為refNode的子元素, 并添加到所有子元素的最后邊

操作節點的一些方法:

dojo.query(".demo").style("color","red").removeClass("fontStyle").addClass("layoutStyle");
dojo.query(".demo").style({color:"red",fontWeight:"bold"}).removeClass("fontStyle").addClass("layoutStyle");
 
var node = dojo.byId("node");
dojo.addClass(node, "className");

刪除節點的所有子節點(簡單描述: 清空節點),刪除節點及其所有自己點(簡單描述: 刪除節點)

var node = dojo.byId("node");
dojo.empty(node);
dojo.destroy(node);

移動節點(將"node"節點, 移動到"refNode"節點的"pos"位置),pos的參數類似上邊創建節點(dojo.create)部分(未驗證).

var node = dojo.byId("node");
var refNode = dojo.byId("refNode");
dojo.place(node, refNode, pos);
Dojo基本DOM操作函數記錄
文章《Dojo基本DOM操作函數記錄》二維碼
  • 微信打賞
  • 支付寶打賞

已有6條評論

  1. Jessie

    寫得很好,拜讀!

    2015-03-26 11:01 回復
  2. 岳家

    http://www.lunwen999.com/ 中國論文基地 中國論文網 論文網 代寫論文 論文代寫 論文格式 免費論文 畢業論文 碩士論文 本科論文 博士論文 工作總結 購買論文 發表論文 論文寫作 論文定制 定制論文 代寫畢業論文 代寫碩士論文 代寫博士論文

    2012-11-21 12:52 回復
  3. 日照港城婚紗劉萍

    來瞧瞧,哈哦

    2012-11-14 09:22 回復
  4. 潤初顏

    函數!?元芳你怎么看?

    2012-11-13 10:52 回復
  5. 籃球比分

    對于代碼一竅不通

    2012-11-12 14:59 回復
  6. 好看電影網

    我也沒有學過,先了解一下

    2012-11-12 14:47 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖