首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

dojo1.7通译 处理DOM(Dojo DOM Functions)

2012-06-29 
dojo1.7翻译处理DOM(Dojo DOM Functions)原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/d

dojo1.7翻译 处理DOM(Dojo DOM Functions)

原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/

难度:低

版本:1.7

?

在这个教程中,你将学到如果使用DOJO来方便的操作DOM对象。操作DOM只是DOJO的的一小部分功能,通过它,你可以高效的取值,更新,增加和删除页面元素。

?

开始

javascript是基于浏览器的,DOM则是我们想要去展现给用户所看的界面。如果我们想在页面已经被加载完成后再进行组织修改页面,则就要使用javascript来修改DOM了。dojo的目标就是提供一种功能,能很方便的操作DOM对象,并能兼容各种浏览器,而且只使用很少量的代码就能实现。

下面是一个我们很常看的一组页面结构

?

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Demo: DOM Functions</title>        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"            data-dojo-config="async: true">        </script>        <script>            require(["dojo/domReady!"], function() {                             });        </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></html>

?

?代码中已经包含了dojo的标签,而且现在你也应该认识require这一块的意思了。在require这个块里是整个页面加载完成后将要执行的语句的地方。

?

检索

首先,为了操作它们,我们要先学习如何来取得页面的DOM对象。最简单的方法是使用dojo/dom的byId方法来取资源。当你传入一个ID值给dojo.byId时,你将会得到一个含有该ID值的DOM对象节点的返回值,如果找不到有该ID值的元素,则返回null.

?

这个功能等同于使用document.getElementById,但有两个不同处。第一,他比较短,而且能兼容不同浏览器。另一个特点是,你可以传入一个DOM节点的ID值,也可以直接传入一个dojo对象节点。如果传入的是一个dojo对象节点,将会把那个对象立即返回,这有利于取值的方便。看个例子。

?

// Require the DOM resourcerequire(["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");     });

?

?运行示例

?

setText方法将会设置节点,因为使用的是dojo.byId所以,传入的参数是ID值或节点效果都是一样的。

?

创建

我们经常会去创建页面元素。dojo并不阻止你去使用docement.createElement方法来创建元素,但用这种方法创建和设置节点的属性将要写出大量的代码。dojo提供了一个兼容浏览器的新方法,使用dojo/dom-construct的创建方法。

?

domConstruct.create有以下几个参数。节点名,属性,子/父节点,放置的位置(默认是last),返回值为创建的新的元素。看一个例子

?

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");     });

?

?运行示例

?

一个列表中的选项被创建,设置其内容为"Six"并加入于列表中。下一步,另一个选项被创建,设置内容为"Seven",设置className值为"seven",让其有了一个加粗的样式,并将其放置于列表中。最后创建一个选项,设置内容为"Three and a half"把它放置于列表的后面,并给定ID值为"three"。

?

当你使用这种方法创建元素时,相对于innerHTML来说会怎么样?如果你已经有了内容,那么使用innerHTML来设置是最快的,但是,如果你并不是马上就要设置其内容并放入到DOM中,那么就使用domConstruct.create

?

放置

如果你在页面中已经有一个节点了并想移动它,那么你就要使用domConstruct.place这个方法。这个方法的参数有:DOM节点或ID值,要关联的DOM节点或ID值,要放置的位置,默认为last。这很像domConstruct.create方法,事实上,domConstruct.create是使用了domConstruct.place方法。如

?

<button id="moveFirst">The first item</button><button id="moveBeforeTwo">Before Two</button><button id="moveAfterFour">After Four</button><button id="moveLast">The last item</button>

?

?例子中定义了一个方法用来移动第三个节点

?

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);        }         // Connect the buttons        on(dom.byId("moveFirst"), "click", moveFirst);        on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);        on(dom.byId("moveAfterFour"), "click", moveAfterFour);        on(dom.byId("moveLast"), "click", moveLast);         });

?

?运行示例

?

设置位置的参数有"before","after","replace","only","first","last"

?

删除

这里有两种方法来删除一个节点。使用domConstruct.destroy删除节点并删除其所拥有的所有子节点。domConstruct.empty将只会删除其子节点。两种方法都只接收ID值或节点对象参数。

?

<button id="destroyFirst">Destroy the first list item</button><button id="destroyAll">Destroy all list items</button>

?function destroyFirst(){

?

    var list = dom.byId("list"),        items = list.getElementsByTagName("li");             if(items.length){        domConstruct.destroy(items[0]);    }}function destroyAll(){    domConstruct.empty("list");}         // Connect buttons to destroy elementson(dom.byId("destroyFirst"), "click", destroyFirst);on(dom.byId("destroyAll"), "click", destroyAll);

运行示例

?

第一个按钮将删除第一个选项,第二个按钮将删除全部的列表

?

结论

至此,我们已经学了DOM对象主要的创建,移动,读取等操作,但他们都是一次只能操作一个对象。如果你想操作多个节点,你可以使用dojo/query方法

热点排行