部分Dojo常用函数简介（三）——页面生命周期及DOM相关常用函数

每个Ajax 框架都对Javascript 做了扩展，提供了很多常用函数，增强了 Javascript 的开发效率。在这里将对部分Dojo 中的常用函数做简单的介绍。由于Dojo的常用函数较多，也为方便大家阅读，将这些常用函数分为了五个类别分别进行介绍。本文将介绍第三部分的内容：页面生命周期及DOM相关常用函数。

* 本系列博文的绝大多数内容来自于对dojocampus.org上的dojo reference guide文档的翻译，在此也特别感谢文档的翻译者们：Fei Jia, Zhu Xiao Wen, Li Wen Bing, Zhang Jun, Hu Kuang, Huang Wei, Wu Min Qi, Mo Ying, Cheng Fu, Zhong Si Qi

 

dojo.addOnLoad

如果想用好dojo，必须熟悉Dojo.addOnLoad，它提供了一种机制使作为参数传入该函数的语句及其他函数可以在整个页面的DOM加载完成之后运行。常见的一种情况是：

 

<mce:script type="text/javascript"><!-- if(dayOfWeek == "Sunday"){ document.musicPrefs.other.value = "Afrobeat"; } // --></mce:script> <form name="musicPrefs"> <input type="text" name="other"> .

 

这段JS代码会无法正确运行，因为在js运行时，”other”还未被定义。当然，你可以把这段JS代码放在页面最后，但这样做并不符合正常的HTML编写方式，而且在另一些情况下，也会对你的代码造成部分影响。

对于这类情况，你就可以使用dojo.addOnLoad(...)：

 

function setAfrobeat(){ document.musicPrefs.other.value="Afrobeat"; } dojo.addOnLoad(setAfrobeat);

 

或者：

 

dojo.addOnLoad( function(){ document.musicPrefs.other.value="Afrobeat"; } );

 

dojo.addOnUnload

与dojo.addOnLoad(...)相呼应，Dojo.addOnUnload用于注册函数在页面销毁时运行。

 

<mce:script type="text/javascript"><!-- // 声明一个在window.unLoad时运行的函数 var unLoad = function() { // 函数内容 alert("unloading..."); } // 向addOnUnload传递该函数指针 dojo.addOnUnload(unLoad); // 注册另一个对象的方法 dojo.addOnUnload(window, "unLoad"); // 注册某一对象的匿名函数 dojo.addOnUnload(window, function() {alert("we're out of here!");}); // --></mce:script>

 

dojo.query

在进行DOM相关操作时，很多时候需要查找特定的DOM节点，使用浏览器原生的DOM API进行查找不仅需要写较多的代码，而且很多时候效率十分低下，dojo.query则提供了一个更快、更方便的方式来对DOM节点进行查询。

Dojo.query接收两个参数，第一个为一个字符串，是通过一些基于CSS3标准的属性查询模板，第二个参数为可选参数，为一个DOM节点对象或节点ID,为查询设定范围。

由于dojo.query采用的是CSS3标准查询模板，当你想用dojo.query进行DOM查询时，你可以在任何的CSS文档中找到正确的查询条件模板，下面的示例是一些简单的查询调用：

 

// 获取所有的 <h3> 节点元素 dojo.query('h3') // 获取所有为其父节点的第一个子节点的 <h3> 节点元素 dojo.query('h3:first-child') // 获取id="main"的节点元素 dojo.query('#main') // 获取所有id="main"的 <h3> 节点元素 dojo.query('#main h3') // 获取id="main"的 <div> 节点元素 dojo.query('div#main') // 获取所有在div内且id="main"的 <h3> 节点元素 dojo.query('div#main h3') // 获取所有带有一个<div>子节点且在一个id="main"节点内的<h3>节点元素 dojo.query('#main div > h3') // 获取所有class="foo"的节点元素 dojo.query('.foo') // 获取所有class为"foo"和"bar"的节点元素 dojo.query('.foo.bar')

 

dojo.byId，dojo.doc, dojo.body

dojo.byId用途与document.getElementById一致：根据DOM节点的ID返回DOM节点对象，但简短了许多，在所有的浏览器下都是有效的。

 

dojo.doc相当于windows[“document”]的值，该函数的作用主要有两个。首先它提供了一个指向当前文档对象的更为简洁的引用。其次，所有使用 dojo.doc 的引用，只需要通过改变dojo.doc变量的值，就可以临时切换到其它的文档对象作用域上。使用这个变量来替代对 window.document 的使用。通过这种方式可以确保是在当前页面的文档对象上工作。另外，通过使用此变量，当文档对象发生改变的时候，与文档对象相关的操作还能正确执行。这点对于需要在iframe中运行的Dijit组件来说尤为重要。

dojo.body用于返回当前文档的body对象。

 

dojo.create，dojo.place

dojo.create()可以简化在维护DOM时经常需要频繁执行的一系列操作步骤，例如：  新建DOM节点/给已存在的节点赋予新的属性 –> 为其设置属性 -> 将其置于DOM树上。

 

该函数接受四个参数： dojo.create(tag, attrs, refNode, pos);

 

tag可以是字符串或DOM节点。如果是字符串，函数会将其视作节点的标签名，以此来新建节点。建立节点时，会以refNode作为父节点。如果refNode为null或并未指定，则默认以dojo.doc作为父节点。

 

attrs是一个JavaScript对象，其中包含了用以赋予节点的一组属性信息。该参数会在节点创建成功后被原封不动的传给dojo.attr。attrs参数可以null，也可以不指定，亦即“不设置任何属性”，但是假如你想指定函数余下的传入参数，则应该为其显示的指定null值。

 

refNode，如之前提到的，作为创建节点的父节点对象，该参数为DOM节点对象或节点的ID。此参数可以省略，即表示“不立即安置该节点”。

 

pos为可选参数。取值可以是数字，或如下字符串之一："before", "after", "replace", "only", "first", 或"last"。如果省略，则默认取"last"。表示安置创建的节点到给定的位置上。

 

若第一个参数传入的是``tag``字符串，则函数成功执行后会返回以该字符串命名的DOM节点，若传入的是DOM节点，则直接将其作为结果返回。例如, 新建一个带href属性的超链接标记，将其置于<body>下：

 

dojo.create("a", { href: "foo.html", title: "Goto FOO!", innerHTML: "link" }, dojo.body());

 

dojo.place函数用于放置给定的DOM节点到指定的位置上。在某些场合下，根据HTML片段来创建和安置节点也许会更容易一些，我们无需为节点设置任何属性，或是将其指定为某个HTML片段的一部分，则可以考虑使用dojo.place：

 

// 利用dojo.place()实现如下代码行同样的功能 // dojo.create("a", { href: "foo.html", title: "Goto FOO!", innerHTML: "link" }, dojo.body()); dojo.place("<a href="foo.html" mce_href="foo.html" title='Goto FOO!'>link</a>", dojo.body() // 利用dojo.place()实现如下代码行同样的功能 // var n = dojo.create("div", null, dojo.body()); var n = dojo.place("<div></div>", dojo.body());

 

dojo.destroy

dojo.destroy用于将当前节点从其父节点中删除，并逐一销毁自身及其所属的全部子节点。该函数仅对DOM节点有效，并且没有返回值。

 

// 根据id销毁节点 dojo.destroy("someId");

 

dojo.attr, dojo.hasAttr, dojo.removeAttr

Dojo.attr提供了获取或修改（增加）DOM节点属性的、事件、CSS样式的方法，它既可作为getter也可作为setter。Dojo.attr包括三个参数：

 

dojo.attr(node, attr, value);

 

node:要进行操作的 DOM节点对象或其ID

attr：要进行操作的DOM节点属性名，或一个包含键值对的JSON对象，用于为DOM节点设置其中包括的所有属性

value，为可选参数，如果attr参数为某一属性名，且传入value参数，则为该节点设置相应属性，如果未传入value参数，则返回该节点的attr属性值，如果该节点没有该属性，则返回false。

dojo.hasAttr用于检查给定的DOM节点是否有给定的属性值，如果有则返回true,否则返回false：

 

result = dojo.hasAttr(node, attr);

 

dojo.removeAttr用于移除给定节点给定节点的给定属性：

 

dojo.removeAttr(node, attr);

dojo.position，dojo.marginBox, dojo.contentBox

Dojo.position用于获取给定DOM节点的绝对位置及大小信息（包括边界 - border）。返回值为一个JSON对象：{ w: 300: h: 150, x: 700, y: 900, }，分别表示w:宽度，h：高度，x：X坐标值，y：Y坐标值，单位都为px。

该函数接受两个参数：

node: 要获取信息的 DOM节点对象或其ID

includeScroll：该参数为一个boolean值，默认为false，当设为true时，返回的x及y则为相对于整个document文档的位置值（忽略滚动条）。

dojo.marginBox和dojo.contentBox都可以用于获取和设置给定节点的大小，第一个参数为给定的DOM节点，第二个参数为可选参数，是一个类似于{ l: 50, t: 200, w: 300: h: 150 }的JSON对象，如果传入第二个参数，则将给定节点设置新的位置、大小。区别在于marginBox包括了节点的margin大小，它们的返回值都为一个对象：{ l: 50, t: 200, w: 300: h: 150 }。

Dojo.style

用于获取或设定DOM节点的样式。该函数接收3个参数：

dojo.style(node, style, value);

node:要进行操作的 DOM节点对象或其ID

style：要进行操作的DOM节点样式属性名，或一个包含键值对的JSON对象，用于为DOM节点设置其中包括的所有样式

value：为可选参数，如果style参数为某一样式属性名，且传入value参数，则为该节点设置相应样式，如果未传入value参数，则返回该节点的style样式值。

dojo.hasClass, dojo.addClass, dojo.toggleClass

dojo.hasClass用于判断给定的DOM节点是否有指定的CSS class

dojo.addClass用于为给定的DOM节点增加指定的CSS class

以上两个函数都接受2个参数：

要进行操作的 DOM节点对象或其ID；一个CSS class名称字符串：

 

if(！dojo.hasClass("bam", "foo")){ dojo.addClass("bam", "foo") }

 

dojo.toggleClass用于为给定的DOM节点添加或删除指定的CSS class。此函数接受3个参数：

node: 要进行操作的 DOM节点对象或其ID

class: 一个CSS class名称字符串。

condition：可选参数，为boolean值。如果给定该参数，当该 参数为TRUE时，操作为添加class，为false时操作为删除class。如果该参数未被指定，如果给定的DOM节点没有给定的class则为其添加，否则删除给定的class。

 

//为”example1”节点添加或删除class “style1” dojo.toggleClass("example1", "style1"); //为”example2”节点添加class “style1” dojo.toggleClass("example2", "style2", true);

 

以上就是部分Dojo的页面生命周期及DOM相关常用函数，在下一部分中，会介绍关于Dojo对于String及Array对象的一些扩展函数。