DOJO学习笔记(13)--节点控件dojo.dom

dojo学习笔记（三）模块：mon / dojo.stringmon 和 dojo.string 是一样的，只要require其中一个就可以使用以下方法dojo.string.trim去掉字符串的空白Usage Example:s = " abc ";dojo.string.trim(s); //will return "abc"dojo.string.trim(s, 0);//will return "abc"dojo.string.trim(s, 1)；//will return "abc "dojo.string.trim(s, -1);//will return " abc"dojo.string.trimStart去掉字符串开头的空白Usage Example:s = " abc ";dojo.string.trimStart(s); //will return "abc " dojo.string.trimEnd去掉字符串结尾的空白Usage Example:s = " abc ";dojo.string.trimEnd(s); //will return " abc" dojo.string.repeat生成由同一字符(串)重复组成的字符串Usage Example:dojo.string.repeat("a", 4); //will return "aaaa"dojo.string.repeat("1234", 3, "-"); //will return "1234-1234-1234" dojo.string.pad使用字符补齐字符串Usage Example:dojo.string.pad("100", 6);//will return "000100"dojo.string.pad("100", 6, "0", 1);//will return "000100"dojo.string.pad("100", 6, "0", -1);//will return "100000"dojo.string.padLeft使用字符补齐字符串开头Usage Example:dojo.string.padLeft("100", 6); //will return "100000" dojo.string.padRight使用字符补齐字符串结尾Usage Example:dojo.string.padRight("100", 6); //will return "100000"模块：mon / ngmon 和 ng 是一样的，只要require其中一个就可以使用以下方法ng.mixin将一个对象的方法和属性增加到另一个对象上Usage Example:var s1 = {name: "TestObj", test1: function(){alert("this is test1!"); }}var s2 = {value: 1000, test2: function(){alert("this is test2!");}} var d = {};ng.mixin(d, s1, s2); //执行后d就具备了s1和s2的所有属性和方法d.test1();ng.extend为指定类的原型扩展方法与属性Usage Example:TestClass = function() {};ng.extend(TestClass, {name: "demo", test: function(){alert("Te st!");}});var o = new TestClass(); //TestClass本来是没有test方法的，但是extend 以后就有test方法了o.test();ng.find=ng.indexOf查找指定对象在指定数组中的位置Usage Example:var arr = [1,2,3,3,2,1];ng.find(arr, 2);//will return 1 ng.find(arr, 2, true);//will return 1ng.find(arr, "2", true);//will return -1ng.find(arr, "2", false);//will return 1ng.find(arr, 2, true, true); //will return 4ng.findLast=stIndexOf查找指定对象在指定数组中的位置，从后往前查Usage Example:var arr = [1,2,3,3,2,1];ng.findLast(arr, 2);//will return 4 ng.findLast(arr, 2, true);//will return 4ng.findLast(arr, "2", true);//will return -1ng.findLast(arr, "2", false);//will return 4ng.inArray查找指定对象是否在指定数组中Usage Example:var arr = [1,2,3];ng.inArray(arr, 1);//will return true ng.inArray(arr, 4);//will return falseng.isObject判断输入的类型是否为对象Usage Example:ng.isObject(new String()); //will return trueng.isObject("123")); //will return falseng.isArray判断输入的类型是否为数组Usage Example:ng.isArray({a:1,b:2}); //will return falseng.isArray([1,2,3]); //will return trueng.isFunction判断输入的类型是否为函数Usage Example:ng.isFunction(function() {}); //will return trueng.isString判断输入的类型是否为字符串Usage Example:ng.isString(""); //will return trueng.isString(0); //will return falseng.isAlien判断输入的类型是否为系统函数Usage Example:ng.isAlien(isNaN); //will return trueng.isBoolean判断输入的类型是否为布尔类型Usage Example:ng.isBoolean(2>1); //will return trueng.isNumber判断输入的类型是否为数值，根据注释所说，此函数使用不太可靠，但是可替换使用的系统函数isNaN也不太可靠ng.isUndefined判断输入是否为未定义，根据注释所说，此函数有可能会导致抛出异常，推荐使用 typeof foo == "undefined" 来判断模块：ng.extrasng.setTimeout延迟指定时间后执行指定方法Usage Example:function onTime(msg){dojo.debug(msg)}ng.setTimeout(onTime, 100 0, "test"); //1秒后会输出调试信息"test"ng.setTimeout(dojo, "debug", 1000, "test"); //1秒后会输出调试信息"test"ng.getNameInObj获得指定项目在指定对象中的名称Usage Example:ng.getNameInObj(dojo, dojo.debug); //will return "debug" ng.shallowCopy返回指定对象的浅表复制副本Usage Example:ng.shallowCopy({}); //will return a 空对象ng.firstValued返回第一个存在定义的参数Usage Example:var a;ng.firstValued(a,2,3); //will return 2。

前端框架中的节点操作与 DOM 操作技巧在前端开发中，节点操作与 DOM（文档对象模型）操作是非常常见且重要的技术。

节点操作指的是对网页中的元素进行增删改的操作，而 DOM 操作则是对整个文档进行访问与操作的方式。

在前端框架中，如何高效地进行节点操作与 DOM 操作是前端开发人员需要掌握的关键技巧之一。

一、节点操作技巧1. 查找元素在前端开发中，经常需要通过元素的标签名、类名、ID等属性来查找相应的元素。

在使用原生 JavaScript 进行节点操作时，可以使用以下方法来查找元素：- getElementById: 通过元素的 ID 查找元素。

- getElementsByClassName: 通过元素的类名查找元素。

- getElementsByTagName: 通过元素的标签名查找元素。

- querySelector: 通过 CSS 选择器查找元素。

当使用前端框架如 Vue.js 或 React.js 等进行开发时，它们通常提供了更便捷的方式来查找元素。

例如，在 Vue.js 中可以使用 v-bind 或 v-on 指令来绑定、监听元素，而不再需要显式地使用上述原生 JavaScript 方法。

2. 创建与插入元素在前端开发中，需要动态地创建新的元素并将其插入到相应的位置。

使用原生JavaScript 进行元素的创建与插入操作可以使用以下方法：- createElement: 创建新的元素节点。

- appendChild: 将元素插入到父元素的子元素列表的末尾。

- insertBefore: 将元素插入到指定位置的前面。

当使用前端框架进行开发时，可以直接使用框架提供的特定方式来创建与插入元素。

例如，在 Vue.js 中可以使用 v-for 指令来循环渲染元素，并使用 v-if、v-show 指令来动态显示或隐藏元素。

3. 修改与删除元素在前端开发中，经常需要修改或删除已经存在的元素。

使用原生 JavaScript 进行元素的修改与删除操作可以使用以下方法：- innerHTML: 设置或获取元素的 HTML 内容。

return a + b; } ng.curryArguments(null, add, [1,2,3,4,5], 2); //will return 7 (= 3 + 4) ng.tryThese 测试参数指定所有函数，并返回第一个返回值不为 0 的函数值，没看懂这个函数 哪里用得着 ng.delayThese
ng.isEmpty({a: 1}); //will return false ng.isEmpty([]); //will return true ng.map 调用指定的方法处理指定的数组或字符串 Usage Example: ng.map([1,2,3,4,5], function(x) { return x * x;}); //will re turn [1,4,9,16,25] ng.forEach 遍历指定的数组或字符串，并对其中的元素调用指定的方法 Usage Example: ng.forEach("abc", function(x) { alert(x); }); ng.every 检查指定的数组是否全部满足指定方法的条件 Usage Example: ng.every([1,-2,3], function(x) { return x > 0; }); //指定的 数组不是全大于 0 的，因此返回 false ng.some 检查指定的数组是否部分满足指定方法的条件 Usage Example: ng.some([1,-2,3], function(x) { return x > 0; }); //指定的数 组有大于 0 的元素，因此返回 true ng.filter 根据指定的方法来过滤指定的数组 Usage Example: ng.filter([1,-2,3], function(x) { return x > 0; }); //will r eturn [1, 3] ng.unnest 把指定的参数或数组转换为一维数组 Usage Example: ng.unnest(1, 2, 3); //will return [1, 2, 3] ng.unnest(1, [2, [3], [[[4]]]]); //will return [1, 2, 3, 4] ng.toArray 将输入转换为数组

Dojo学习笔记--dojo.graphics.color &dojo.uri.Uri模块：dojo.graphics.color下面是dojo里定义的颜色名称d.white //白色d.black //黑色d.red //红色d.green //绿色d.blue //蓝色d.navy //海军蓝d.gray //灰色d.silver//银色dojo.graphics.color.Color颜色类Usage Example:var color = new dojo.graphics.color.Color(d.black); //定义一个黑色的颜色对象var color = new dojo.graphics.color.Color(0,0,0); //定义一个黑色的颜色对象var color = new dojo.graphics.color.Color(0,0,0,1.0); //定义一个黑色的颜色对象var color = new dojo.graphics.color.Color([0,0,0,1.0]); //定义一个黑色的颜色对象var color = new dojo.graphics.color.Color('rgb(0,0,0)'); //定义一个黑色的颜色对象var color = new dojo.graphics.color.Color('#000000'); //定义一个黑色的颜色对象dojo.graphics.color.Color.toRgbUsage Example:color.toRgb(); //返回一个[0,0,0]的数组color.toRgb(true); //返回一个[0,0,0,1.0]的数组dojo.graphics.color.Color.toRgbaUsage Example:color.toRgba(); //返回一个[0,0,0,1.0]的数组dojo.graphics.color.Color.toHexdojo.graphics.color.Color.toStringUsage Example:color.toHex(); //返回"#000000"color.toString(); //返回"#000000"dojo.graphics.color.Color.toCssUsage Example:color.toCss(); //返回"rgb(0,0,0)"dojo.graphics.color.Color.blend混合另一个颜色得到一个新颜色Usage Example:color.blend('#ffffff', 1); //返回[255,255,255]color.blend('#ffffff', -1); //返回[0,0,0]color.blend('#ffffff', 0); //按1比1混合黑色和白色，返回[127,127,127]颜色参数可以为颜色的任意形式，比如数组，字符串等ordojo.graphics.color.blend([0,0,0], [255,255,255], 0); //will return [127,127,127] dojo.graphics.color.blend("#000000", "#ffffff", 0); //will return "#7f7f7f"若第一个参数为字符串，则返回值也会返回字符串dojo.graphics.color.Color.blendHexUsage Example:dojo.graphics.color.blendHex("#000000", "#ffffff", 0); //will return "#7f7f7f" dojo.graphics.color.extractRGB将输入转换为RGB数组dojo.graphics.color.hex2rgb将输入的字符串转换为RGB数组dojo.graphics.color.rgb2hex将输入的RGB数组转换为字符串dojo.graphics.color.Color.fromArrayUsage Example:var color = dojo.graphics.color.Color.fromArray([0,0,0,1.0]);模块：dojo.uri.Uridojo.uri.Uri专门用来处理URI(统一资源标识符)的类Usage Example:uri = (new dojo.uri.Uri("http://myserver/dojo/", "guide.html")).toString(); //uri will be "http://myserver/dojo/guide.html"uri = (new dojo.uri.Uri("http://myserver/dojo/", "../guide.html")).toString(); //uri will be "http://myserver/guide.html"RFC规定的URI语法：[scheme:][//authority][path][?query][#fragment]authority语法：[user-info@]host[:port]比如我们定义一个urivar uri = new dojo.uri.Uri("http://user:password@myserver/dojo/","guide.html?page=1#top");则uri的属性如下：authority: 服务器名 "user:password@myserver:80"fragment: 片断名 "top"host: 主机名 "myserver"password: 密码 "password"path: 路径 "/dojo/guide.html"port: 端口 80query: 参数 "page=1"scheme: 模式 "http"uri: 完整的地址 "http://user:password@myserver/dojo/guide.html?page=1"user: 用户名 "user:" 似乎有点问题，多了一个冒号。

DOM节点的属性和⽅法DOMDOM 是 JavaScript 操作⽹页的接⼝，全称为“⽂档对象模型”（Document Object Model）。

它的作⽤是将⽹页转为⼀个 JavaScript 对象，从⽽可以⽤脚本进⾏各种操作（⽐如增删内容）。

它只是⼀个接⼝规范，可以⽤各种语⾔实现。

所以严格地说，DOM 不是 JavaScript 语法的⼀部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就⽆法控制⽹页。

另⼀⽅⾯，JavaScript 也是最常⽤于 DOM 操作的语⾔。

节点DOM 的最⼩组成单位叫做节点（node）。

⽂档的树形结构（DOM 树），就是由各种不同类型的节点组成。

每个节点可以看作是⽂档树的⼀⽚叶⼦。

节点的类型有七种。

Document：整个⽂档树的顶层节点DocumentType：doctype标签（⽐如<!DOCTYPE html>）Element：⽹页的各种HTML标签（⽐如<body>、<a>等）Attribute：⽹页元素的属性（⽐如class="right"）Text：标签之间或标签包含的⽂本Comment：注释DocumentFragment：⽂档的⽚段浏览器提供⼀个原⽣的节点对象Node，上⾯这七种节点都继承了Node，因此具有⼀些共同的属性和⽅法。

节点树所有的节点就好像组成了⼀棵树，⽽document节点就代表整个树也就是整个⽂档。

⽂档的第⼀层有两个节点，第⼀个是⽂档类型节点（<!doctype html>），第⼆个是 HTML ⽹页的顶层容器标签<html>。

后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

除了根节点，其他节点都有三种层级关系。

⽗节点关系（parentNode）：直接的那个上级节点⼦节点关系（childNodes）：直接的下级节点同级节点关系（sibling）：拥有同⼀个⽗节点的节点DOM 提供操作接⼝，⽤来获取这三种关系的节点。

dojo对数组的处理函数，dojo.forEach、dojo.every、dojo.some、dojo.map等数组处理是 Ajax 应用开发中的常见操作。

Dojo 基本库提供了一些方法用来方便的对数组进行处理，完成一些典型的任务。

这些与数组处理相关的方法的具体说明如下所示：dojo.forEach(array, callback, scope)：该方法用来遍历数组并对其中的每个元素执行操作。

其参数 array表示的是数组，callback表示的是对每个元素所执行操作的 JavaScript 方法，可选的 scope表示的是 callback方法调用时 this所指向的对象。

callback方法在被调用时会传入三个参数，分别表示当前元素、当前元素在数组中的序号以及数组本身。

dojo.every(array, callback, scope)：该方法用来判断是否数组的全部元素都满足特定的条件。

其三个参数的含义与 dojo.forEach()方法相同。

callback方法通过返回真假值来声明某个元素是否符合条件。

dojo.some(array, callback, scope)：该方法用来判断数组中是否至少有一个元素满足特定的条件。

其三个参数和 callback方法的含义与 dojo.every()相同。

dojo.map(array, callback, scope)：该方法用来对数组中的每个元素执行操作，并返回一个数组包含操作的结果。

其三个参数的含义与 dojo.forEach()相同。

dojo.filter(array, callback, scope)：该方法用来对数组中包含的元素进行过滤，只保留满足特定条件的元素。

其三个参数的含义与 dojo.forEach()相同。

callback方法通过返回真假值来声明某个元素是否应该被保留。

dojo.indexOf(array, value, fromIndex, findLast)：该方法用来在数组中查找指定的元素，如果找到就返回该元素在数组中的序号，否则返回 -1。

Dojo 学习笔记(1. 模块与包)Intro:Dojo 是一个非常强大的面向对象的JavaScript 的工具箱, 建议读者能够去补充一下JavaScript 下如何使用O O进行编程的, 这对于你以后阅读Dojo Source 有很大的用处.请大家下载dojo 0.3.1, 以下的说明均针对此版本翻译自/WikiHome/DojoDotBook/BookUsingDojoGetting Started1: 把Dojo 加入到我们的Web程序中1. 标志<script type="text/javascript">djConfig = { isDebug: false };</script>djConfig 是Dojo 里的一个全局对象, 其作用就是为Dojo 提供各种选项, isDebug 是最常用的属性之一,设置为True 以便能够在页面上直接看到调试输出, 当然其中还有些属性与调试有关, 这里就不罗索了2. 引用dojo 的启动代码<script type="text/javascript" src="/yourpath/dojo.js" />这样你就引用了dojo 的代码, 并可以直接使用其中部分常用的对象, 下载下来的dojo.js 是压缩(remove comments and space) 后的代码, 要阅读的话, 建议阅读dojo.js.uncompressed.js, dojo.js大概有127K, 而未压缩前有211K, ok, 为什么会这么大呢, 原来其已经把部分常用的模块整合进dojo.js 里 ,因此显得大了一点, build.txt 里就说明了默认的dojo.js 包含了哪些模块3. 声明你所要用到的包<script type="text/javascript">dojo.require("dojo.math");dojo.require("dojo.io.*");dojo.require("dojo.widget.*");</script>你就把这些代码当成是java 的import 语句或 C #中的using 语句一样, 如果你不require 的话, 而模块本身又没有整合在dojo.js 中, 是会出现脚本错误的喔2. 针对不同需求提供的预整合包Dojo 本身是由许多模块所组合而成的, 但是由于用户需求的多样性, dojo 针对不同的需求而提供了不同的版本, 用户在下载dojo 的时候就看见可以选择很多的版本, 比如Ajax 版和Widget 版, 每个版本最重要的区别就在于dojo.js 文件, 但是除此之外, 每一个版本都是全功能的, dojo.js 根据版本的不同而整合进了不同的模块3. 直接获取Dojo 的最新源代码首先你必须安装Subversion, 当Subversion 在你的电脑上能够正常工作后, 你就可以通过如下命令下载dojo 的源代码:svn co /dojo/trunk/这会在你的当前目录下创建一个trunk 的目录; 如果你希望直接Get 到当前目录, 用这个命令:svn co /dojo/trunk/ .或者你希望Get 到当前目录下的MyDir 目录, 用这个命令:svn co /dojo/trunk/ MyDir模块与包模块Dojo 的代码被划分为逻辑单元称之为模块, 这有点类似于Java 中的package, 除了dojo 的模块能够包含类( 类似于java 中的classes) 和简单函数比如: 模块"dojo.html" 包含了一系列的函数, 比如dojo.html.getContentBox(), 模块"dojo.dnd" 包含了一系列的HtmlDragObject 的类注意名称约定, 函数的首字母为小写字母, 类的首字母为大写模块也可以称之为"命名空间"包在多数情况下, dojo 的模块只需要定义在一个文件就可以了, 但有时, 一个模块可能划分到多个文件,比如: 模块dojo.html, 本来是定义在一个文件中, 可是由于功能的增强, 文件逐渐变大, 我们不得不将其拆分为多个文件, 这主要是为性能考虑, 以便浏览器可以只下载其需要用到的代码, 不幸的是其实现细节对于dojo 的用户看起来不那么透明, 你必须知道你想要用到的功能到底是包含在哪个文件,然后才能require 并使用它这样的每一个文件都称之为一个包dojo.require("dojo.html.extras")将引用文件src/html/extras.js, 这将定义模块dojo.html 的若干( 并非所有) 函数据我所知, 尽管单个文件可以定义包里的多个类, 单个脚本文件不能定义多个模块( 在Java 可以等效于在一个文件中定义 2 个类), 并且, 包的名称和模块的名称可以不同, 比如: 包dojo.widget.Button 定义了dojo.widget.html.Button基本上你应该这样认为, 包和模块尽管密切相关, 但是是两个完全不同的实体为什么会有模块和包这样的概念?为什么会有模块和包这样的概念? 为了满足你的应用程序只需要加载其所用到的东西的需求, 充分利用模块化设计的优点, dojo 维护了最小的足印以便仍能提供你所需要的功能, 为什么要你的用户浪费时间去下载用不到的JavaScript, 当一个包就是一个js 文件时, 一个模块本质上就是一个命名空间, 比如:dojo.style 或dojo.html.extras多数简单情况下, 一个包包含了一个模块, 但更常见的是, 一个模块可能被拆分为几个包文件利用包和模块, 将能确保你能够交付最相关的功能代码, 最小程度的减少代码的膨胀和消除由此带来的不好的用户体验, 这就是模块设计的主要目标, 通过模块化, 你能够引入自定义模块( 你自己拥有的JavaScript 工具), 并且维护模块对于核心代码库基本不会产生什么影响另外, Dojo 的模块系统也提供了内建的机制来使用代码提供命名空间, 比如, 通过模块dojo.event 定义的Dojo 的事件系统怎样引用设置引用语句你怎样才能知道该引用哪个包到dojo.require()?1. 模块首先, 确定你要使用什么模块, 这个例子我们假定你要使用dojo.lfx.html2. 包搜索代码后你发现dojo.lfx.html 定义在 2 个文件:src/lfx/html.jssrc/lfx/extras.js根据你要用到的功能, 你可以dojo.require("dojo.lfx.html");或dojo.require("dojo.lfx.html");dojo.require("dojo.lfx.extras");通配符新用户可能会对dojo.lfx.* 这样就可以替代上面 2 句而感到诧异, 实际上,__package__.js 中已经定义了通配符可以代替的语句, 并且这样可以让dojo 根据当时的环境而决定加载具体的模块/////////////////////////////////////////////////////////////////////////////////////////Dojo 学习笔记(2. djConfig 解说)djConfig 是dojo 内置的一个全局设置对象，其作用是可以通过其控制dojo 的行为首先我们需要在引用dojo.js 前声明djConfig 对象，以便在加载dojo.js 的时候才能够取得所设置的值，虽然在0.3 版本以后dojo 支持在加载后设置，但是强烈建议你把声明djConfig 的代码作为第一段script一个完整的djConfig 对象定义如下（值均为dojo 的默认值）<script type="text/javascript">var djConfig = {isDebug: false,debugContainerId: "",bindEncoding: "",allowQueryConfig: false,baseScriptUri: "",parseWidgets: truesearchIds: [],baseRelativePath: "",libraryScriptUri: "",iePreventClobber: false,ieClobberMinimal: true,preventBackButtonFix: true,};</script>isDebug 是一个很有用的属性，顾名思义，如果设置为真，则所有dojo.Debug 的输出有效，开发时应该设置为true ，发布时应该设置为falsedebugContainerId 同样也是与调试有关的，如果不指定的话，调试信息将会直接利用document.write 输出，这样可能会破坏页面的整体布局，所以你可以指定任何一个可以作为容器的html 元素的id 作为调试信息输出容器allowQueryConfig ，这个属性指明dojo 是否允许从页面url 的参数中读取djConfig 中的相关属性，当值为true 时，dojo 会优先从url 参数中读取djConfig 的其他属性，比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebugbaseScriptUri ，一般不需要设置，dojo 会自动根据你引用dojo.js 的路径设置这个值，比如，<script type="text/javascript" src="../dojo/dojo.js"></script> ，自动获取的值便是../dojo/ps: 如果你有多个工程需要同时引用dojo.js 的话，建议也把dojo 当作一个独立的工程，引用的时候采用绝对路径就可以了parseWidgets ，这个是可以控制dojo 是否自动解析具有dojoType 的html 元素为对应的widget ，如果你没有使用任何Widget ，建议设置为false 以加快dojo 的加载速度searchIds ，这是一个字符串数组，定义了所有需要解析为widget 的html 元素的ID，如果ID 不在其中的html元素是不会被解析的，当数组为空数组时，则所有具有dojoType 的元素都会被解析还有一个bindEncoding ，是用来设置默认的bind 请求的编码方式至于其它的属性，不是用处不大，就是不知道有什么作用在实际开发中，可以把djConfig 的定义放在一个js 文件里，并将其作为第一个引用的js 文件，这样应该是最方便的。

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.简介Dojo是一个强大的面向对象JavaScript框架。

主要由三大模块组成：Core、Dijit、DojoX。

Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。

Dijit 是一个可更换皮肤，基于模板的WEB UI控件库。

DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。

dojo其实是一个组件模型，类似于Spring，用来支持大规模的组件化开发。

组件模型的作用就是增强代码的重用，这对于提高开发效率是至关重要的。

2.下载dojo的js文件进入官网下载，/download/，本文使用的版本是1.73.加载dojo通过网络添加dojo，例如通过googleapis网络连接添加：<script src="/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>使用给本地dojo：<script src="XXX/dojo/dojo.xd.js"></script>，XXX是js文件的相对路径。

4.运行环境目前验证过，IE8、Firefox运行正常，chrome有时加载失败。

5.HelloWorld建立项目DojoTest001，WEB-INF目录下建helloworld.jsp在head里添加：样式文件<link rel="stylesheet" type="text/css" href="js/dojoroot/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" type="text/css" href="js/dojoroot/dojo/resources/dojo.css"><script type="text/javascript" src="js/dojoroot/dojo/dojo.js"djConfig="parseOnLoad: true"></script>加载js文件<script type="text/javascript">// Load Dojo's code relating to the Button widgetdojo.require("dijit.form.Button");//这里面的不是路径</script><body class="tundra"></body>Body里面添加一个button：<button dojoType="dijit.form.Button" id="helloButton">Hello World!<script type="dojo/method" event="onClick">alert('You pressed the button');</script></button>如果加载成功，button会显示特定样式，否则会显示标准样式。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

它将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等），获得了足够的能力来创建动态的HTML。

HTML DOM 独立于平台和编程语言。

它可被任何编程语言诸如Java、JavaScript 和VBScript 使用。

方法/步骤1. 1什么是DOM? DOM(document Object Model）,是针对HTML和XML的API。

可以理解为DOM就是一系列功能集合。

2. 2DOM可以用来干什么？理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML文档进行动态操作，从而实现许多动态交互效果。

3. 3DOM是怎么来的？回答这个问题需要追溯到1990年代后期微软与Netscape的‘浏览器大战’。

4. 4怎么使用DOM? 通过javascript对HTML DOM进行访问。

HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。

可直接调用DOM实现的方法，进行DOM操作，例如：getElementById()：返回带有指定ID 的元素。

getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表。

appendChild()：把新的子节点添加到指定节点。

removeChild()：删除子节点。

replaceChild()：替换子节点。

insertBefore()：在指定的子节点前面插入新的子节点。

createAttribute()：创建属性节点。

createElement()：创建元素节点。

createTextNode()：创建文本节点。

getAttribute()：返回指定的属性值。

2006年初，dojo还是0.22的时候就很关注它的发展，可一直没有在实际项目中使用。

一来是由于文档的缺少，而来是dojo的相关介绍总是让人望而生畏。

到现在都如此，第一个hello world就搞了一大堆东西，比如widget组件，自定义的script 标签等，加上要引入什么css文件，djConfig、dojo.require等等，让人很迷惑，这么复杂，到底dojo该怎么使用呢？我只是想把dojo当作一个普通的js类库，就像prototype那样？OK，闲话少说，来看看如何使用dojo。

第一步，引入dojo.jsdojo的发行包里有4个子目录，要引入的文件是名叫"dojo"的子目录里的dojo.js。

假设你是这样的目录结构:project|+--dojo-lib| || +--dijit| +--dojo| +--dojox| +--util|+--dojo_hello_world.html<script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>开始使用dojo现在开始使用dojo的第一个函数:dojo.byId ，dojo.byId就等同于常用的document.getElement 。

<input type="text" name="username" id="username" value="Mark" /><script type="text/javascript">var username = dojo.byId('username').valuealert(username);</script>OK，是不是和普通的js库一样，没有任何玄机？dojo.addOnLoad现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo 里叫做dojo.addOnLoad。

(一). Dojo基本1. Dojo分为三个项目：dojo是Dojo的基础，所有其他的功能都建立在其上，总之，它包含大约50个JavaScript脚本和几个其他资源。

这些资源用于处理浏览器差异的统一，JavaScript模块化，JavaScript核心库扩展，W3C DOM API扩展，远程脚本编程，拖放，数据存储API，本地化和国际化，以及一些其他的附加功能。

dijitDojo的小部件框架和内建的小部件集,widgets,例如TAB,TREE等dojoxDojo扩展库。

这包含了从表格小部件到绘图库的所有功能,例如ENHANCEDGRID, 2D,3D图形,图表,等2. Dojo常用方法dojo.require引用JS文件DOJO特色，按需加载JS文件dojo.addOnLoad表示在HTML页面加载后执行脚本程序dojo.byId按照DOMID得到一个DOM对象、（document.getElementsById)dijit.byId每个DIJIT UI组件有个ID,此函数通过ID获取一个UI对象dojo.forEach循环遍历数组通过id 来获得Dijit 实体没有通过dojo.byId() 方法而是使用的dijit.byId() 方法。

在Dojo 体系中，如果想通过Dijit 的id 来获得Dijit 实体，只能通过dijit.byId()。

而作用与document.getElementById() 相同的dojo.byId()，无法获得任何Dijit 实体。

Dojo 组织认为DOM 对象实体和Dijit 实体是两个完全不同的对象实体类型。

通过id 去获得这两种实体也应该使用不同的方法。

dojo.byId() 被分配用来获得DOM 对象实体，而dijit.byId() 则被分配用来获得Dijit 类型的实体(二). Dojo的使用1. 引入css样式表的定义文件<style type="text/css">@import"js/dijit/themes/tundra/tundra.css";@import"js/dojo/resources/dojo.css";</style>现在引用dojo自带的css样式。

dojo.event.topic.destroy 删除主题，此主题所有的订阅都将失效 Usage Example:
dojo.event.topic.destroy("myTopic"); 模块：dojo.event.browser
dojo.event.browser.addListener 增加监听器 Usage Example:
KEY_PAUSE: 19, KEY_CAPS_LOCK: 20, KEY_ESCAPE: 27, KEY_SPACE: 32, KEY_PAGE_UP: 33, KEY_PAGE_DOWN: 34, KEY_END: 35, KEY_HOME: 36, KEY_LEFT_ARROW: 37, KEY_UP_ARROW: 38, KEY_RIGHT_ARROW: 39, KEY_DOWN_ARROW: 40, KEY_INSERT: 45, KEY_DELETE: 46, KEY_LEFT_WINDOW: 91, KEY_RIGHT_WINDOW: 92, KEY_SELECT: 93, KEY_F1: 112, KEY_F2: 113, KEY_F3: 114, KEY_F4: 115, KEY_F5: 116, KEY_F6: 117, KEY_F7: 118, KEY_F8: 119, KEY_F9: 120, KEY_F10: 121, KEY_F11: 122, KEY_F12: 123, KEY_NUM_LOCK: 144, KEY_SCROLL_LOCK: 145
dojo.event.connectBefore dojo.event.connect 默认是后绑定，connectBefore 则是早绑定，绑定的方法将 在指定方法前执行，用法与 connect 一致 dojo.event.connectAround Usage Example:

JavaScript之DOM的理解学习归纳DOM是⼀个针对HTML和XML⽂档的⼀个API，主要描绘了⼀个层次化的节点树1、Node类型。

JavaScript中所有的节点类型都继承⾃Node类型，因此所有节点类型都共享相同的基本属性和⽅法。

常⽤的属性以及相关要点：1）nodeType，node.nodeType，1表⽰元素节点，2表⽰元素的属性节点，3表⽰⽂本节点2）nodeName，元素节点的nodeName是元素标签，⽂本节点的nodeName是#Text,Document的nodeName是#document3）nodeValue，元素和Document的nodeValue都是null，⽂本节点的nodeValue是纯⽂本，属性节点的nodeValue是属性值节点关系：childNodes,parentNode,firstChild,lastChild,nextSibling操作节点：appendChild，insertBefore，replaceChild，removeChild，cloneNodeDocument类型，document对象是HTMLDocument（继承⾃Document类型）的实例，相关特殊⽅法：(可以设置可以获取)1) document.documentElement2) document.body3) document.doctype document.title4) document.URL document.domain(域名)5) document.getElementById("id") document.getElementsByTagName("标签名")document.getElementsByName()这个⽅法只有HTMLDocument类型才有，⽐如HTMLElement类型没有6) write() writeln() open() close()Element类型常⽤标准特性：(可以设置可以获取)1）element.id，title，lang，dir（语⾔的⽅向，从左⾄右ltr，从右⾄左rtl），className……特别的，⾃定义属性⽤点⽅法失效，事件处理程序（以属性形式存在的时候）和style属性在点⽅法和get/setAttribute⽅法上有不同2）相对应的另⼀种设置或者获取特性（属性）的⽅法：getAttribute()，setAttribute()，removeAttribute()3）attributes属性，是Element类型的专属属性（其他类型的节点⽆法使⽤），遍历元素可以⽤。

dom结构类型DOM（文档对象模型）是一种用于表示和操作文档的树状结构的编程接口。

DOM 不是一种具体的编程语言，而是一种描述文档结构的标准。

它提供了一种将文档表示为树形结构的方式，其中每个节点都代表文档中的一个部分，如元素、属性、文本等。

在 DOM 结构中，常见的节点类型包括：1. 元素节点（Element Node）：表示 HTML 或 XML 文档中的元素，如 <div>、<p>、<a> 等。

元素节点可以有子节点，如其他元素、文本或属性。

2. 文本节点（Text Node）：表示元素中的文本内容。

文本节点是元素节点的子节点，包含在开始和结束标签之间。

3. 属性节点（Attribute Node）：表示元素的属性。

属性节点包含在元素节点内，描述了元素的特性。

4. 注释节点（Comment Node）：表示注释内容。

注释节点是一种特殊的文本节点，以 <!-- 开始，以 --> 结束。

5. 文档节点（Document Node）：表示整个文档。

文档节点是DOM 树的根节点，包含文档的所有内容。

6. 文档类型节点（Document Type Node）：表示文档的类型声明。

这通常出现在文档的开头，使用 <!DOCTYPE>。

在使用 JavaScript 操作 DOM 时，可以通过 DOM API 提供的方法来访问和操作这些节点。

例如，使用 getElementById 方法可以获取指定ID 的元素节点，使用createTextNode 方法可以创建文本节点，等等。

通过这些方法，你可以动态地修改文档的内容和结构。

分类： 2010-08-26 15:01 10846人阅读 (9) 认识Dojo中的表单：Form正如“”一文中提到的，Dijit库提供了一整套极其强大且灵活的基于Dojo的小部件(Widget)，帮助你很方便地增强Web应用的界面和功能。

这些小部件包括下拉菜单、弹出菜单、对话框、页面布局、树、进度条、以及表单元素。

很显然Dijit让这些控件变得很漂亮，但本文所关注的是它们增强的功能，尤其是对一个基本表单在可用性和有效性方面的增强。

Dijit实现的快速回顾要在一个页面中使用Dijit所要做的第一件事情就是引入Dojo:[xhtml]1.<script src="/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js"djConfig="isDebug:true,parseOnLoad:true"></script>第二步是导入Dijit的主题样式表:最后一步就是为BODY元素的class属性设置一个主题名:[xhtml]1.<body class="claro">增强基本表单元素注意：本文将使用声明的方法创建小部件。

你也可以用编程的方法创建任何部件，参见“认识Dojo中的界面控件”中的dojo.behavior。

增强我们的静态表单的第一步是增强表单元素自身。

Dijit为每一种表单元素都提供了至少一种（有时有2-3种）对应了小部件。

使用Dijit小部件的声明式创建法，以及dojoType属性，我们很快就能将静态表单中的每一样东西都变成小部件。

[xhtml]1.<form action="process.php"method="get">2.<!– text inputs: dijit.form.TextBox –>3.<b>First Name: </b>4.<input type="text"name="firstName"placeholder="Your Name"id="firstName"dojoType="dijit.form.TextBox"/>5.<b>Website: </b>6.<input type="text"name="website"placeholder="Your Website"id="website"dojoType="dijit.form.TextBox"/>7.<!– radio buttons: dijit.form.FilteringSelect –>8.<b>Favorite Color: </b>9.<select name="color"id="color"dojoType="dijit.form.FilteringSelect">10.<option value="">Select a Color</option>11.<option value="Red">Red</option>12.<option value="Green">Green</option>13.<option value="Blue">Blue</option>14.</select>15.<!– radio buttons: dijit.form.CheckBox –>16.<b>Send Emails? </b>17.<input type="checkbox"id="checkbox"checked="checked"dojoType="dijit.form.CheckBox"/>18.<!– radio buttons: dijit.form.RadioButton –>19.<b>Email Format: </b>20.<input type="radio"id="radio1"name="format"checked="checked"dojoType="dijit.form.RadioButton"/>21.<label for="radio1">HTML</label>22.23.<input type="radio"id="radio2"name="format"dojoType="dijit.form.RadioButton"/>24.<label for="radio2">Text</label>25.<!– submit button: dijit.form.Button –>26.<input type="submit"value="Submit Form"label="Submit Form"id="submitButton"dojoType="dijit.form.Button"/>27.</form>好啦，现在我们这些静态的、有点乏味的表单元素已经披上了主题的外衣，而且还具备了更多的功能。

js学习总结：DOM节点⼆（dom基本操作）⼀、DOM继承树DOM——Document Object ModelDOM定义了表⽰修改⽂档所需要的⽅法。

DOM对象即为宿主对象，由浏览器⼚商定义，⽤来操作html和xml的⼀类⼚商定义，也有⼈称DOM是对HTML以及xml的标准编程接⼝。

继承树模型图：1.document继承于HTMLDocument,⽽HTMLDocument继承于Document;2.⽂本节点对象Text与注释节点对象Comment继承于CharacterData3.在Element节点下其实存在两个⼦节点，除了HTMLElement节点以外还有⼀个XMLElement节点。

⼆、DOM的基本操作1.getElementById⽅法定义在Document.prototype上，也就是说Element节点上不能调⽤这个⽅法。

2.getElementsByName⽅法定义在HTMLDocument.prototype上，即⾮HTML标签不能使⽤。

3.getElementsByTagName⽅法定义在Document.prototype和Element.prototype上。

<div><span>a</span></div><script type="text/javascript">var div = document.getElementsByTagName("div")[0];var span = div.getElementsByTagName("span")[0];console.log(span);</script>上⾯⽰例的代码中获取元素的⽅法看名称好像是同⼀个，其实不然，获取div的getElementsByTagName是由document对象向⽗级的⽗级Document原型获取的。