dojo基础方法详解：元素操作与事件处理

"这篇文档是关于Dojo工具库中常用方法的总结，主要涉及元素的获取、事件的监听、数组的遍历等核心功能。" Dojo是一个强大的JavaScript工具库，它提供了丰富的功能来帮助开发者处理DOM操作、事件处理、模块加载等任务。以下是对标题和描述中提到的一些Dojo关键方法的详细说明： 1. dojo.ready `dojo.ready` 是Dojo库中的一个关键函数，用于确保在DOM完全加载并准备就绪后执行指定的函数。这通常用于延迟执行依赖于DOM结构的JavaScript代码，以避免在页面未完全加载时触发错误。 ```javascript dojo.ready(function(){ // 在这里编写DOM操作或需要DOM已准备好的代码 }); ``` 2. dojo.query `dojo.query` 是一个用于选取DOM元素的方法，类似于jQuery的 `$()`。它支持CSS选择器，可以用来选取一组符合特定条件的元素。 - `dojo.query("[name^=aa]")`: 选取所有name属性以"aa"开头的元素。 - `dojo.query("#aa")`: 选取id为"aa"的唯一元素。 - `dojo.query(".aa")`: 选取所有class为"aa"的元素。 - `dojo.byId("aa")`: 获取id为"aa"的元素，等同于原生的`document.getElementById`。 3. dojo.attr与dojo.setAttr `dojo.attr` 和 `dojo.setAttr` 用于获取或设置DOM元素的属性值。`dojo.setAttr` 在较新版本的Dojo中已被`dojo.attr` 替代。 ```javascript var strs = dojo.attr(item, "name"); // 获取item元素的name属性值 dojo.attr(dojo.byId("aa"), {"required": true}); // 设置id为"aa"的元素的required属性为true dojo.attr(dojo.byId("aa"), {"readonly": true}); // 设置id为"aa"的元素的readonly属性为true ``` 4. dojo.forEach `dojo.forEach` 是Dojo提供的一个便利的数组遍历函数，可以用于遍历任何可迭代对象，包括数组或`dojo.query`返回的结果集。 ```javascript dojo.forEach(dojo.query("[name^=aa]"), function(obj, i, list) { // 遍历所有name以"aa"开头的元素 }); ``` 5. dojo.connect与dojo.disconnect `dojo.connect` 用于将函数连接到指定事件上，实现事件监听。`dojo.disconnect` 可用于断开连接，取消事件监听。 ```javascript var handle = dojo.connect(dojo.byId("aa"), "onchange", function() { // 当id为"aa"的元素的值改变时执行的函数 }); // 断开事件连接 dojo.disconnect(handle); ``` 6. dojo.focus与dojo.blur `dojo.focus` 用于将焦点设置到指定元素，而`dojo.blur` 则用于移除元素的焦点。 ```javascript dojo.byId("aa").blur(); // 移除id为"aa"的元素的焦点 dojo.byId("aa").focus(); // 将焦点设置到id为"aa"的元素 ``` 7. dojo.getAttr与dojo.getValue `dojo.query` 返回的是一个NodeList对象，可以使用索引访问元素并获取其属性值。`dojo.getAttr` 与 `dojo.getValue` 在某些版本的Dojo中可能是可用的，但在现代版本中可能已经被其他方法替代，例如直接使用 `node.getAttribute` 和 `node.value`。 ```javascript var value = dojo.query("[name^=aa]")[0].value; // 获取name以"aa"开头的第一个元素的值 var anotherValue = dojo.byId("aa").value; // 获取id为"aa"的元素的值 ``` 通过这些基本方法，开发者可以有效地在Dojo环境中进行DOM操作、事件处理以及数据获取，从而构建出功能丰富的Web应用程序。