dojo 的DOM操作 dojo/dom

来源:互联网 发布:淘宝怎样延迟久点收货 编辑:程序博客网 时间:2024/05/01 22:37
对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");
     
});



<!DOCTYPE html>

<html>
<head>
<metacharset="utf-8">
<title>Demo: DOM Functions</title>
<scriptsrc="//ajax.googleapis.com/ajax/libs/dojo/1.7.8/dojo/dojo.js"
data-dojo-config="async: true">
</script>
<script>
require(["dojo/domReady!"],function() {
 
});
</script>
</head>
<body>
<ulid="list">
<liid="one">One</li>
<liid="two">Two</li>
<liid="three">Three</li>
<liid="four">Four</li>
<liid="five">Five</li>
</ul>
</body>
</html>



// Require the DOM resource

require(["dojo/dom","dojo/domReady!"], function(dom) {
 
functionsetText(node, text){
node = dom.byId(node);
node.innerHTML = text;
}
 
varone = dom.byId("one");
setText(one,"One has been set");
setText("two","Two has been set as well");
 
});


The arguments to domConstruct.create are as follows: node name as a string, properties of the node as an object, an optional parent or sibling node, and an optional position in reference to the parent or sibling node (which defaults to "last").It returns the new DOM element node. Let's take a look at an example:

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

function(dom, domConstruct) {
 
varlist = 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");
 
});

原创粉丝点击