Dojo DOM Functions - The Dojo Toolkit

合集下载

Dojo1.11官方教程文档翻译(1.3)新的Dojo

Dojo1.11官方教程文档翻译(1.3)新的Dojo

Dojo1.11官方教程文档翻译(1.3)新的Dojo起步Dojo1.7是Dojo Toolkit向现代架构的一个重大转变,Dojo1.10在这个趋势上更进一步。

因为它广泛的向后兼容,为了充分利用Dojo1.10的优势,一些基本概念由此发生了改变。

这些概念将作为Dojo2.0的基础,采用这些新概念将帮你在正确的路上走得更远。

当然为了从这些新的要素(如dojo\/on )中直接获益,你需要采用其中一些新概念。

本教程将解释一些Dojo中介绍的概念,主要侧重于新的Dojo。

我会尽力说明为什么作出改变和如何改变。

一些变化是从根本上的出现的,咋一看会很迷惑,但它们都有着充分的理由——让你的代码更高效、运行更快、玩转JavaScript、更棒的可维护性。

总之,花时间去理解modern Dojo是值得的。

本教程不是一个手把手的版本迁移指导,但对于很熟悉Dojo的你来说,它远胜于一个初级概念读本。

更多的技术细节请参考Dojo 1.X to 2.0 Migration Guide 。

Hello新世界新Dojo的一个核心理念就是全局命名空间是件坏事。

这有很多原因,在一个复杂的web应用中,全局命名空间很容易被各种代码污染,特别是当许多组织使用多重JavaScript框架时。

我甚至不用从安全的角度去提那些故意修改全局命名空间产生的恶果。

如果你打算在新Dojo中的全局命名空间里访问一些东西,请剁手。

由于向后兼容的原因大量的toolkit暂时是全局范围的,但不要用在新的开发中。

当你发现你在输入dojo.* 或dijit.* 或dojox.* ,你正步入歧途。

那些只是引入dojo.js 来获取一个核心功能然后输入dojo.something 来require几个模块到你的核心内容的开发者们,你们真的要改改了,因为这么干真的很糟。

再来一次,跟着我念“全局命名空间真烂,全局命名空间真烂,我才不用全局命名空间,我才不用全局命名空间”。

Dojo框架概述

Dojo框架概述

Dojo框架概述Dojo开始于2004年9月,由JotSpot的Alex Russell所领导和创建,其官方网站是。

Dojo框架从开始到现在,经历了0.3和0.4版本,现在已经开发到1.1.1版本了。

Dojo框架严格说起来并不是一个框架,而只是一个工具包。

在Dojo的官方网站上,一般都是将Dojo称之为Toolkit(工具包),不是Framework(只是Framework 的一部分),也不是Library(在Library之上又加了一层封包系统)。

Dojo包括了Ja vaScript本身的语言扩展,以及各个方面的工具类库,和比较完善的UI组件库。

如果要真正把握Dojo框架本质,需了解三个相关概念,分别为框架(framewo rk)、库(library)和工具(toolkit)。

其中,Framework是在软件开发中,为了让其他的项目可以分享和合作,通常定义的一个结构(framework)。

一个结构通常包含支持程序(support programs),库和一个脚本程序。

可能认识到Dojo就是framewo rk的一个部分,但并不是framework的本身。

Library(库文件)定义了很多可以引用的方法(function),它们是在任何位置都可以运行的,并不是我们平常自己在程序中定义的方法。

这时我们可能任务dojo就是库的集合。

但是dojo比一个库的集合要包含得多很多。

工具是在开发程序中采用的组件。

其实总结Dojo的概念是非常困难的。

是因为Dojo是一个可扩展的代码集合(e xpandable collection of code)。

扩展不只是来自于众多开发者,并且也可以根据我们自己的习惯扩展Dojo框架。

就是说,把目光放在Dojo身上的原因是因为Dojo 可以和JavaScript取长补短。

现在浏览器的种类很多,有IE、Netscape、firefox、opera和safari等。

如果要编写一段程序,去完成特定的功能,对于一个浏览器非常简单。

最新JS八大框架

最新JS八大框架

J S八大框架JS八大框架DojoDojo 是目前最为强大的JS框架,它在自己的 Wiki 上给自己下了一个定义,Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱。

Dojo 很想做一个“大一统”的工具箱,不仅仅是浏览器层面的,野心还是很大的。

Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API,包括了 JS 本身的语言扩展,以及各个方面的工具类库,和比较完善的 UI 组件库,也被广泛应用在很多项目中,他的 UI 组件的特点是通过给 HTML 标签增加 TAG 的方式进行扩展,而不是通过写 JS 来生成,Dojo 的 API 模仿 Java 类库的组织方式。

用 Dojo 写 Web OS 可谓非常方便。

Dojo 现在已经 4.0 了,Dojo 强大的地方在于界面和特效的封装,可以让开发者快速构建一些兼容标准的界面。

优点:库相当完善,发展时间也比较长,功能强大,据说利用 Dojo 的 io.bind() 可以实现 comet 看见其功能强大非一般,得到 IBM 和 SUN 的支持。

缺点:文件体积比较大,200多KB,初次下载相当慢,此外,Dojo 的类库使用显得不是那么易用,JS语法增强方面不如 PrototypePrototype它是一个非常优雅的 JS 库,定义了 JS 的面向对象扩展,DOM 操作API,事件等等,以 Prototype 为核心,形成了一个外围的各种各样的 JS 扩展库,是相当有前途的JS 底层框架,值得推荐,感觉也是现实中应用最广的库类(RoR 集成的 AJAX JS 库),之上还有 Scriptaculous 实现一些JS组件功能和效果。

优点:基本底层,易学易用,甚至是其他一些js特效开发包的底层,体积算是最小的了。

缺点:如果说缺点,可能就是功能是他的弱项dScriptaculousScriptaculous 是基于prototype.js 框架的 JS 效果。

用dojo.dnd实现拖放功能 - Dojo中文博客 - CSDN博客

用dojo.dnd实现拖放功能 - Dojo中文博客 - CSDN博客

用dojo.dnd实现拖放功能- Dojo中文博客- CSDN博客用dojo.dnd实现拖放功能相信很多人都自己动手写过拖放。

DHTML里做拖放的原理很简单,一般有这么三个阶段:mousedown 的时候做一些初始化,mousemove 的时候更新拖放对象的位置,mouseup 的时候再做一些清理工作。

讲起来简单,但做起来总要花一些功夫的。

Dojo 的dnd 模块提供了通用且功能强大的拖放支持,让我们可以不用自己造轮子,而且用起来也很方便。

废话少说,先来看看它到底有多方便。

假设页面上有两个ul ,我们需要对ul 里的li 元素实现拖放,让它们可以自由地在两个列表间移动。

如果自己手写,虽然不难但也要花点时间吧。

用Dojo 的话,除了加载模块之外,甚至连一行javascript 语句都不需要:view plaincopy to clipboardprint?01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "/TR/html4/strict.dtd">02.<html>03. <head>04. <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">05. <title>Untitled Document</title>06. <style type="text/css">07. @import"/ajax/libs/dojo/1.5/dojo/resourc es/dojo.css";08. @import"/ajax/libs/dojo/1.5/dijit/themes/c laro/claro.css";09.10. ul{11. border: 3px solid #ccc;12. padding: 2em;13. margin: 5em;14. float: left;15. cursor: default;16. }17. .dojoDndItemOver{18. background: #ededed;19. cursor: pointer;20. }21. .dojoDndItemSelected {22. background: #ccf;23. }24. .dojoDndItemAnchor{25. background: #ccf;26. }27. </style>28. <script type="text/javascript"src="/ajax/libs/dojo/1.5/dojo/dojo .xd.js" djConfig="parseOnLoad: true"></script>29. <script type="text/javascript">30. dojo.require("dojo.dnd.Source");31. </script>32. </head>33. <body class="claro">34. <ul dojoType="dojo.dnd.Source">35. <li class="dojoDndItem">Item1</li>36. <li class="dojoDndItem">Item2</li>37. <li class="dojoDndItem">Item3</li>38. <li class="dojoDndItem">Item 4</li>39. <li class="dojoDndItem">Item 5</li>40. </ul>41. <ul dojoType="dojo.dnd.Source">42. <li class="dojoDndItem">Item A</li>43. <li class="dojoDndItem">Item B</li>44. <li class="dojoDndItem">Item C</li>45. <li class="dojoDndItem">Item D</li>46. <li class="dojoDndItem">Item E</li>47. </ul>48. </body>49.</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css">@import"/ajax/libs/dojo/1.5/dojo/resourc es/dojo.css";@import"/ajax/libs/dojo/1.5/dijit/themes/c laro/claro.css";ul{border: 3px solid #ccc;padding: 2em;margin: 5em;float: left;cursor: default;}.dojoDndItemOver{background: #ededed;cursor: pointer;}.dojoDndItemSelected {background: #ccf;}.dojoDndItemAnchor{background: #ccf;}</style><script type="text/javascript"src="/ajax/libs/dojo/1.5/dojo/dojo .xd.js" djConfig="parseOnLoad: true"></script><script type="text/javascript">dojo.require("dojo.dnd.Source");</script></head><body class="claro"><ul dojoType="dojo.dnd.Source"><li class="dojoDndItem">Item 1</li><li class="dojoDndItem">Item 2</li><li class="dojoDndItem">Item 3</li><li class="dojoDndItem">Item 4</li><li class="dojoDndItem">Item 5</li></ul><ul dojoType="dojo.dnd.Source"><li class="dojoDndItem">Item A</li><li class="dojoDndItem">Item B</li><li class="dojoDndItem">Item C</li><li class="dojoDndItem">Item D</li><li class="dojoDndItem">Item E</li></ul></body></html>这个例子用了host在google的dojo1.5版本,可以直接运行。

DOJO基础

DOJO基础

DOJO基础文章分类:Web前端Dojo是一个用javascript语言实现的开源DHTML工具包(/,我这里下载的为dojo-release-1.5.0)。

Dojo 提供了一套完整的开发解决方案,包括核心的 JavaScript 库、简单易用的小部件(Widget)等。

Dojo框架由四个部分组成:Dojo基本库、Dojo核心库、Dijit(小部件框架和内建的小部件集)和扩展库Dojox。

基本库包含最基本的功能,核心库是基本库的扩展,Dijit是用户界面库,而扩展库则是各式各样的扩展组件。

Dojo 的最初目标是解决开发 DHTML 应用程序遇到的一些长期存在的历史问题,现在,Dojo 已经成为了开发 RIA 应用程序的利器。

Dojo 是一个分层的体系架构,最上面的一层是 Dojo 的 Widget 系统,Widget 指的是用户界面中的一个元素,比如按钮、进度条和树等,最下面的一层是包系统。

Dojo API 的结构与 Java 很类似,它把所有的 API 分成不同的包(package),当您要使用某个 API 时,只需导入这个 API 所在的包。

1.Dojo基础dojo/目录下包含dojo.js,必须在使用工具包的任何内容之前调用这个脚本元素。

dojo.js是模块dojo的模块主脚本。

当dojo.js被运行后,全局dojo(一个对象)被创建出来,具有如下功能。

环境属性:指明运行时环境的一组变量(比如浏览器的版本及其能力)。

语言扩展:填补JavaScript中漏掉的少数元素异步编程:用来进行事件编程和异步回调功能DOM编程:使编写DOM更加容易XHR编程:通过XHR对象访问服务器面向对象编程:用以创建强大而灵活的类层次结构所需要的功能Dojo加载器:用以载入JavaScript和Dojo模块的功能dojo/根目录下面包含的几个dojo中不会自动载入的模块,因此必须显式的通过dojo.require函数载入它们。

Dojo框架简单应用

Dojo框架简单应用

Dojo框架简单应用Dojo框架是一个具有许多功能的丰富库,包括:处理html、字符串、样式、D OM、正则表达式和若干其他实用工具的通用库;包括字典、ArraryLists、队列、S ortedList、设置和堆栈的数据结构;用于添加动画效果、验证、拖放和若干其他功能的可视化Web实用工具;数学和加密库、存储组件和XML解析等类库。

其中对于创建美观的HTML页面,Dojo框架为开发Web胖客户端程序提供了一套完整的Widget和一些特效操作。

Dojo提供了可以用于构建页面的一组丰富的标记。

Dojo的众多优点之一是允许使用标准的HTML标记。

Dojo框架UI组件的特点是通过给html标签增加tag的方式进行扩展,而不是通过写JS来生成。

这样,H TML开发人员就可以方便地使用Dojo。

Dojo 0.9框架具有标记有下面几个:1.文本框的扩展首先看下对文本框这个表单元素的扩展。

在Dojo框架中,文本框的使用方式在上述代码中,使用Dojo框架标记扩展了文本框的功能。

其中,把trim设为“true”使得dijit.form.Textbox在数据前后去除空格,当文本框失去焦点,dojo自动的修改内容,并放回文本框中。

去除空格对数据库操作常常非常有用,因为首尾的空格经常导致查询失效。

ucfirst和lowercase属性非常的相近。

分别是让输入的字母大写和输入小写,当文本框失去焦点,ucfirst只改变小写的字母,所有大小的字母都保持不变。

同样lowercase只改变大小字母。

2.内嵌编辑框当不在编辑状态的时候,这个部件表现的像一个<div> 标签,当被包含的文字被单击的时候,部件就进入了编辑状态。

在这个状态下,之前显示的文字被隐藏,另外一个编辑部件在同一位置显示出来。

该部件所具有的其他属性标记,如表9-3所示:表9-3 内嵌编辑框属性该编辑框的使用示例如下所示:me)在单击后可以被修改。

可编辑部件可以是实现了接口(setTextValue(String value);String value = getTe xtValue();void focus();)的任何部件。

锋利的jQuery

锋利的jQuery

第一章认识一下jQuery随着JavaScript的兴起,一系列JavaScript库也蓬勃发展起来。

从早期的Prototype、Dojo 到2006年的jQuery,再到2007年ExtJs。

可以发现,互联网正在掀起一场JavaScript风暴。

在这场风暴中,jQuery以其独特优雅的姿态,始终处于这场风暴的中心,受到越来越多的人的追捧。

1.1 jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库,它由John Resig 创建于2006年1月。

它简化了遍历HTML文档、操作DOM、处理事件、执行动画和Ajax的操作。

它独特而又优雅的代码风格改变了JavaScript程序员编写程序的设计方式和思路。

不管你是网页设计师、后台开发者、业余爱好者还是项目管理者,也不管你是JavaScript 初学者还是JavaScript高手,你都有很多理由去学习jQuery,因为它是面向任何人的。

1.2 加入jQuery1.2.1 JavaScript简介JavaScript是为了适应动态网页制作的需要而诞生的一种编程语言。

它是由Netscape公司开发的一种脚本语言(scripting language)。

JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。

然而,几乎每个Web 开发人员都曾有过诅咒JavaScript 的经历。

这个备受争议的语言受累于其复杂的称为文档对象模型(DOM)的编程模型、糟糕的实现和调试工具以及不一致的浏览器实现。

直到现在,很多开发人员还认为JavaScript是一门令人厌恶的语言。

随着WEB2.0的兴起,作为广泛应用于Web 开发的脚本语言,JavaScript开始日益重要起来,JavaScript的复苏使一些业界领袖人物也不得不开始重新审视这种编程语言。

诸如Ajax (Asynchronous JavaScript + XML) 这样的编程技术让Web 网页更加迷人,而完整的Web 开发框架,比如Apache Cocoon(一种使用而且充分利用了XML强大功能的发布框架),则让JavaScript 的应用越来越多,使其不止限于是一种用于制作Web 页面的简单脚本。

DojoQuery详解

DojoQuery详解
if(nodes[x].className == "progressIndicator"){ list.push(nodes[x]);
} }
在上述代码中,我们需要对页面中的所有节点进行遍历,逐一判断其 className 属性是否满足匹配条件才行。通过这个典型的例子,我们可以清楚地看到,使用 Dojo Query 在 DOM 节点查询方面具有非常显著的优势。 事实上,使用 Dojo Query 不仅在表达查询条件的简洁性上会更具优势,相比于直接利用 DOM API 进行处理的方式,其执行速度也通常会更加的快。接下来读者便会看到,这一点尤其在我们需要查询相对复杂的页面节点 关系时,会变得更为突出。 除了上述我们看到的,Dojo Query 提供了基本的依据 tag、class、id 进行查询的方式以外,它还提供了许多更为复杂的查询语法,而所有这些语法则都遵循于 CSS 规范。Dojo Query 的这一做法十分的明智,因为 CSS 是已经被大家所广泛使用和接受了的一种 Web 技术,其对 HTML 页面元素进行选择性修饰的方式,兼具语法简洁和功能强大的特点,目前所有的主流浏览器都对 CSS 有很好的支持。Dojo Query 沿用了 CSS 的语法,使得 使用者无需学习一整套新的查询语法,便可以很好的掌握 Dojo Query 的使用,以完成各种复杂的查询功能。 目前,Dojo Query 支持许多常见的 CSS 选择器语法。例如,我们可以利用较为复杂的类选择器语法,实现对符合指定 class 属性的指定元素进行查询:
}); </script> </head> <body>
<button id="b1" /> <button id="b2" /> <form id="thisForm" >
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Dojo DOM FunctionsIn this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browser way. Using basic DOM knowledge and only a few Dojo functions, you will be able to efficiently create, read, update and delete elements in the page on the fly.Difficulty: BeginnerDojo Version: 1.8TweetGetting StartedAs far as browser-based JavaScript is concerned, the Document Object Model (DOM) is the glass that we paint on to put content and user interface in front of our users. If we want to augment, replace or add to the HTML once loaded into the browser, JavaScript and the DOM is how it's done. Dojo aims to make working with the DOM easy and efficient by providing a handful of convenience functions that fill some awkward cross-browser incompatibilities and make common operations simpler and less verbose.To explore those functions we will be manipulating a simple page containing an unordered list with five elements in it:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo: DOM Functions</title><script src="///ajax/libs/dojo/1.8.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>The page already has the Dojo script tag, and you should recognize the r e q u i r e block. All code that manipulates the DOM must wait until the DOM is ready before it can be executed.RetrievalFirst things first: We need to know how to get elements from the DOM, in order to work with them. The easiest way to do that is by using the d o j o/d o m resource's b y I d method. When you pass an ID tod o m.b y I d, you will receive the DOM node object with that ID. If no matching node is found, a null value will be returned.This is the equivalent of using d o c u m e n t.g e t E l e m e n t B y I d, but with two advantages: it is shorter to type, and it works around some browsers' buggy implementations of g e t E l e m e n t B y I d. Another nice feature of d o m.b y I d is that when it is passed a DOM node, it immediately returns that node. This helps to create APIs that take both strings and DOM nodes. Let's look at an example:// 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");});ABOUT THE AUTHORSam Foster is a Dojo committer and web enginee TUTORIAL CREATED BYError in the tutorial? Can’t find what you arelooking for? Let us know!Tutorials Reference Guide API Documentation DocumentationView DemoThe s e t T e x t function sets the text of a node, but since it passes the n o d e argument to d o m.b y I d it will take either a node ID as a string or a DOM node.CreationAnother thing you will be doing often is creating elements. Dojo doesn't prevent you from using the native d o c u m e n t.c r e a t e E l e m e n t method to create elements, but creating the element and setting all the necessary attributes and properties on it can be verbose. Furthermore, there are enough cross-browser quirks to attribute setting to make d o j o/d o m-c o n s t r u c t's c r e a t e method a more convenient and reliable option.The arguments to d o m C o n s t r u c t.c r e a t e 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) {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");});View DemoA simple list item is created with the content of "Six" and appended to the list. Next, another list item is created with the content of "Seven", its c l a s s N a m e property is set to "seven", it's styled so it has a bold font, and then appended to the list. Finally, a list item is created with the contents "Three and a half" and is inserted after the list item with the ID "three".When would you create elements explicitly like this, versus setting a container element's i n n e r H T M L property? If you already have your content as a string of HTML, setting the i n n e r H T M L property will always be faster. However, d o m C o n s t r u c t.c r e a t e comes into its own when you want to create elements but not immediately place them in the DOM, or when you want to insert or append a new element without disturbing the sibling nodes around it.PlacementIf you already have a node and want to place that node, you will need to use d o m C o n s t r u c t.p l a c e. The arguments are as follows: a DOM node or string ID of a node to place, a DOM node or string ID of a node to use as a reference, and an optional position as a string which defaults to "last" if not provided. This is very similar to what we saw in d o m C o n s t r u c t.c r e a t e and, in fact,d o m C o n s t r u c t.c re a t e uses d o m C o n s t r u c t.p l a c e under the hood. For our example, we have added a few buttons to the page:<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>The example defines functions which move the third node around the list usingd o m C o n s t r u c t.p l a c e: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 buttonson(dom.byId("moveFirst"), "click", moveFirst);on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);on(dom.byId("moveAfterFour"), "click", moveAfterFour);on(dom.byId("moveLast"), "click", moveLast);});View DemoThe possible values for the placement argument are "before", "after", "replace", "only", "first", and"last". Please see the reference guide for domConstruct.place for more details as to what eachplacement option does, though the names are decently intuitive.In the simple case, domConstruct.place does little more than the nativep a r e n t N o d e.a p p e n d C h i l d(n o d e) might do. Its value is in being able to easily specify position,whether it is in reference to a parent or sibling node - with one consistent API.DestructionMost often you'll be creating nodes, but occasionally, you'll want to remove nodes as well. There aretwo ways to do this in Dojo: d o m C o n s t r u c t.d e s t r o y which will destroy a node and all of its children,while d o m C o n s t r u c t.e m p t y will only destroy the children of a given node. Both take a DOM node ora string ID of a node as their only argument. We're going to add two more buttons to our page:<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);View DemoThe first button will destroy the first item in the list on each click. The second empties the list entirely.ConclusionSo far, we have a pretty comprehensive set of tools that we can use to do simple DOM manipulation,from creating nodes, to moving them about, to getting rid of them -- but they all work on only onenode at a time. What if the nodes you want to work with don't have IDs? The next tutorial will coverd o j o/q ue r y, which allows us to search for and work with nodes based on CSS selectors!Tweet© The Dojo Foundation, All Rights Reserved. License Information Internet Application Management Provided By Reliam, Inc.。

相关文档
最新文档