官方教程: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下所有子节点
}