dojo 七 DOM dojo/dom

官方教程：Dojo DOM Functions
对dom的使用，需要引用包dojo/dom。
1.获取节点，dom.byId
byId中既可以传递一个字符串，也可以传递一个节点对象

require(["dojo/dom", "dojo/domReady!"], function(dom) {

function setText(node, text){

node = dom.byId(node);//通过已有对象

node.innerHTML = text;

}

var one = dom.byId("one");//通过字符串

setText(one, "One has been set");

setText("two", "Two has been set as well");

});

2.创建节点，domConstruct.create，创建一个新的节点domConstruct需要引用包dojo/dom-construct，包括4个参数。第一个：节点名，如"li"，"a"
第二个：属性对象，可以设置需要创建节点的各个属性、样式、内容和值
第三个：一个父节点或同级节点对象，可选第四个：一个插入点标志字符串，由此决定是将第三个参数做为父节点附加到其内部，或是做为同级节点插入，可选，默认为"last"表示附加到父节点最后，"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后

require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],

function(dom, domConstruct) {

var list = dom.byId("list"),

three = dom.byId("three");

domConstruct.create("li", {

innerHTML: "Six"

}, list);

domConstruct.create("li", {

innerHTML: "Seven",

className: "seven",

style: {

fontWeight: "bold"

}

}, list);

domConstruct.create("li", {

innerHTML: "Three and a half"

}, three, "after");

});

3.放置节点，domConstruct.place，改变已存在的一个节点的位置
domConstruct.place包括三个参数。
第一个：目标节点，是一个id字符串或节点对象，即需要放置的节点
第二个：关联节点，是一个id字符串或节点对象，即目标节点将附加到该父节点最前或最后，或者，插入到该同级节点前或后
第三个：一个插入点标志字符串，由此决定是将第二个参数做为父节点附加到其内部，或是做为同级节点插入其前后，可选，默认为"last"表示附加到父节点最后，"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后

require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"],

function(dom, domConstruct, on){

function moveFirst(){

var list = dom.byId("list"),

three = dom.byId("three");

domConstruct.place(three, list, "first");

}

function moveBeforeTwo(){

var two = dom.byId("two"),

three = dom.byId("three");

domConstruct.place(three, two, "before");

}

function moveAfterFour(){

var four = dom.byId("four"),

three = dom.byId("three");

domConstruct.place(three, four, "after");

}

function moveLast(){

var list = dom.byId("list"),

three = dom.byId("three");

domConstruct.place(three, list);

}

});

4.毁灭节点，domConstruct.destroy，彻底删除一个已存在的节点及其子节点。如果仅需清空该节点下的子节点，而保留该节点则用domConstruct.empty。参数都是一个id字符串或节点对象。

function destroyFirst(){

var list = dom.byId("list"),

items = list.getElementsByTagName("li");

if(items.length){

domConstruct.destroy(items[0]);//删除list下第一个li子节点

}

function destroyAll(){

domConstruct.empty("list");//清空list下所有子节点

}

dojo 七 DOM dojo/dom相关推荐

dojo 官方翻译 dojo/_base/array 版本1.10
官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/_base/array.html#dojo-base-array array模块dojo进行 ...
ArcGIS中加载模块时dojo/domReady!和dojo/ready的区别
我们在使用ArcGIS Javascript API开发时,最开始要先加载模块: <script>require(["esri/map", "dojo/do ...
dojo Quick Start/dojo入门手册--xmlhttp dojo.xhrGet
OK,介绍了简单的DOM操作方法,接下来该到Ajax的传统项目-XmlHttp了.在使用xmlhttp时,需要注意到编码的问题,要让dojo默认绑定为utf-8怎么办呢?很简单,只需要修改一下引入do ...
dojo Quick Start/dojo入门手册--开始使用dojo.js
2006年初,dojo还是0.22的时候就很关注它的发展,可一直没有在实际项目中使用.一来是由于文档的缺少,而来是dojo的相关介绍总是让人望而生畏. 到现在都如此,第一个hello world就搞了 ...
dojo中的dojo/on
在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Click me!</button> ...
dojo中的dojo/dom-style
作用:DOM节点获取或设置样式. 用法: // Dojo 1.7+ (AMD) require(["dojo/dom-style"], function(domStyle){dom ...
dojo中的dojo/dom-construct
首先是引用: require(["dojo/dom-construct"], function(domConstruct){}); dom-construct主要包含如下方法: 1 ...
dojo.publish 和 dojo.subscribe
这俩个函数都与事件紧密相关. -- dojo.subscribe(/*String*/topic, /*Object|null*/context, /*String|Function*/method) ...
dojo 九 effects dojo/_base/fx 和 dojo/fx
官方教程:Dojo Effects 这里讲学习一下dojo如何实现淡入.淡出.滑动等效果. 实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx. dojo/_base/fx 中 ...

dojo 七 DOM dojo/dom

dojo 七 DOM dojo/dom相关推荐

最新文章

热门文章