教学资源系统网站建设方案,群辉域名登录wordpress,文章编辑器wordpress,口碑好的定制网站建设制作商在本篇文章中#xff0c;我们将了解DOM的查询以及如何运用dojo/query这个模块来轻松地选择节点并操作他们。 入门指南 在操作DOM的过程中#xff0c;如何快速高效地检索出DOM节点显得相当重要。我们在Dojo DOM Functions中已经熟悉了 dom.byId#xff0c;然而#xff0c;在… 在本篇文章中我们将了解DOM的查询以及如何运用dojo/query这个模块来轻松地选择节点并操作他们。 入门指南 在操作DOM的过程中如何快速高效地检索出DOM节点显得相当重要。我们在Dojo DOM Functions中已经熟悉了 dom.byId然而在应用程序里找出每一个感兴趣的节点的唯一ID是项繁琐且易错的工作。并且仅靠ID的方式来选择大量节点的效率可见是低下的。所以这里介绍另一个解决方案dojo/query。dojo/query模块使用类似CSS查询方式你常在样式表里使用的方式来检索一列节点模块也支持高级的CSS3选择器 查询 为了举例说明一些最常用的查询我们将用到下面的HTML如果在你的网站里用到一列的链接那么你可能会使用到下面的HTML ul idlistli classodddiv classbolda classoddOdd/a/div/lili classevendiv classitalica classevenEven/a/div/lili classodda classoddOdd/a/lili classevendiv classbolda classevenEven/a/div/lili classodddiv classitalica classoddOdd/a/div/lili classevena classevenEven/a/li
/ulul idlist2li classoddOdd/li
/ul 你第一件想做的事就是获取整个列表。我们从前面的知识知道你可以使用 dom.byId但这里你可以用 query乍一看这种方式的作用并不明显但我们可以从下面的例子中学到更多 // require the query and domReady modules
require([dojo/query, dojo/domReady!], function(query) {// retrieve an array of nodes with the ID listvar list query(#list)[0];
}) 通过在某个标识符前面加个 #我们告诉query去查找包含这个ID属性的节点集。这种匹配习惯和CSS相似。需要注意的是 query始终返回数组对象。在后面我们将进一步了解这种数组但是我们知道只有一个也只能有一个节点的ID为list我们将他从数组中取出。 根据ID获取节点是不错的一个方式但使用 dom.byId的效率将更好。但query允许你通过css样式名来选择节点。例如我们想获取那些样式为odd的节点 // retrieve an array of nodes with the class name odd
var odds query(.odd); 通过在标识符前面加上 .我们告诉query去查找那些样式名包含标识符的节点。再次说明这个样式表匹配相似。在上面的例子中query将会返回一个包含4个li节点和3个a节点。 限定你的查询 你可能已经注意到上一个例子中的odds查找出的结果中包含了两个列表中的节点。如果我们只想获取第一个列表中的odds节点我们有两种方式 // retrieve an array of nodes with the class name odd
// from the first list using a selector
var odds1 query(#list .odd);// retrieve an array of nodes with the class name odd
// from the first list using a DOM node
var odds2 query(.odd, document.getElementById(list)); 不同的方式获取的两个数组中包含同样的结果第一种是通过选择语法在所有DOM中限制结果输出第二种是限制查询引擎在特定的DOM中查找结果。 当query执行时不带第二个参数它将搜索整个DOM结构便利html标签下的所有节点。当第二个参数制定为某个节点时它将搜索范围限制在这个节点下。 如果你的DOM相对比较小就像例子中的省略第二个参数是可行的。但当页面中的DOM结构相当大是最好加入第二个参数来限制查询范围。这样做比在整个文档中查找得更快。 剩下的例子中我们将省略第二个参数但在使用query的时候请注意--保持你的代码运行得更快和更好的用户体验。 高级查询 我们前面的查询结果中混合了li标签和a标签但如果我们只关心a标签时怎么做呢你可以将标签名和样式名合并起来 var oddA query(a.odd); 对比分割标识符代表了等级关系你可以将标识符和目标节点合并起来这里包含样式名称可以使用query查询 另一种选择器可以跨浏览器但不是在所有样式里都支持就是这中选择器只查询第一个选择器下的第二个选择器。举个例子 // Retrieve an array of any a element that has an
// li as its ancestor.
var allA query(li a);
// Retrieve an array of any a element that has an
// li as its direct parent.
var someA query(li a); 查看Demo allA包含6个a标签而someA将只包含2个a标签任何一个选择器都可以在的右边包括CSS选择器。我们现在只涉及到了一些常用选择器query完全支持CSS3并且兼容你自己可能会遇到的其他选择器 节点集合 我们之前提到过,query返回一个符合选择器的节点数组这个数组就是 dojo/NodeList并且数组包含可以和节点交互的方法。上一个例子就用到了几个方法现在让我们看看一些你很可能在你程序里用到的方法。为了辅助例子我们需要以下的HTML div idlistdiv classoddOne/divdiv classevenTwo/divdiv classoddThree/divdiv classevenFour/divdiv classoddFive/divdiv classevenSix/div
/div dojo/NodeList拥有一些和Dojo array helper相似的方法。例如ForEach它会为数组中的每个节点都运行一次函数。 // Wait for the DOM to be ready before working with it
require([dojo/query, dojo/dom-class, dojo/domReady!],function(query, domClass) {query(.odd).forEach(function(node, index, nodelist){// for each node in the array returned by query,// execute the following codedomClass.add(node, red);});}); 一个函数会传给forEach通常叫做回调函数数组中的每个元素都会调用这个函数并且带入下面的参数node代表当前节点index代表节点的索引NodeList则代表这个数组。对于大部分开发组来说第三个参数可以忽略但在某些数组不太容易获取的情况下例如本例中第三个参数则有助于获取数组中的其他元素。forEach方法也可以接收第二个参数来制定回调函数的执行域。 其他的一些NodeList的array helper方法为map,filter,every和some。除了every和which返回的是布尔类型外其他的方法返回的都是NodeList。 还有一些扩展模块通过增加其他的方法到NodeLists来扩展NodeLists的能力。class和style帮助方法在 dojo/NodeList-dom。 dojo/NodeList-dom提供了一些符合Dojo操作DOM的方法所以之前的例子可以简化 require([dojo/query, dojo/NodeList-dom, dojo/domReady!], function(query) {// Add red to the className of each node matching// the selector .oddquery(.odd).addClass(red);// Add blue to the className of each node matching// the selector .evenquery(.even).addClass(blue);
}); 事件 NodeList提供的另一个快捷方法是on用来连接DOM的事件。尽管写一篇文章将讲到DOMN事件我们这里了解一下使用NodeList的on方法。这里需要注意的是尽管这是一个方便的方法但尽量不要在包含大量节点的节点数组中使用这种方法一种叫 event delegation的技术可以在那种情况下使用这种方法将在events tutorial中讲到。 button classhookUp demoBtnClick Me!/button
button classhookUp demoBtnClick Me!/button
button classhookUp demoBtnClick Me!/button
button classhookUp demoBtnClick Me!/button
script// Wait for the DOM to be ready before working with itrequire([dojo/query, dojo/domReady!], function(query) {query(.hookUp).on(click, function(){alert(This button is hooked up!);});});
/script 查看Deom on方法为query返回的每个节点绑定事件。 总结 正如你所看到的操作DOM的节点是相当的容易。使用query我们可以既快速又方便地获取到那些我们想要操作的节点集。修改样式也同样也很容易。我们展示了一个绑定点击事件到节点的简单实例在下一篇文章中我们将深入理解Dojo的事件机制。 转载于:https://www.cnblogs.com/ruowind/p/3542530.html
