/**
** 基本的DOM操作只是用到了dojo的核心文件.
** 使用dojo.query将返回一个匹配到的节点数组-dojo.Nodelist, 这个数组内建了一些常用的方法. 可以操作DOM
**/
/*---------------使用dojo的方法--------------*/
dojo.ready(function(){
//一坨一坨的代码.
});
/*---------------获取元素节点--------------*/
dojo.byId("demo"); //获取ID为demo的元素
dojo.query("#demo"); //获取ID为demo的元素
dojo.query(".demo"); //获取所有class为demo的元素
dojo.query(".demo > li"); //获取class为demo的元素中, 所有直接子集li元素
dojo.query("input[name='demo']"); //获取拥有name属性,且属性值为demo的input元素
dojo.query(".demo", dojo.byId("p_demo")); //从id为p_demo的元素中获取所有class为demo的元素
/*---------------创建元素节点--------------*/
dojo.create("li", {
id:"demo",
className:"deLeGemo",
innerHTML:"create node",
style:{
"color":"red",
"fontWeight":"bold"
}
}, refNode, "before");
dojo.create(str, attrs, refNode, pos);
// pos有7个可用取值(以下内容如果引起身体不适.. 请自觉服用抗呕吐药物, 如:维生素B6):
// 1. [null] 新创建的元素将作为refNode的子元素, 且添加到refNode中最后的位置
// 2. [before] 新创建的元素将作为refNode的同辈元素, 且位于refNode的前边
// 3. [after] 新创建的元素将作为refNode的同辈元素, 且位于refNode的后边
// 4. [only] 新创建的元素将取代父元素内所有子元素, 添加到refNode内部
// 5. [replace] 新创建的元素将直接替换点父元素
// 6. [first] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最前边
// 7. [last] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最后边
/*---------------操作节点的一些方法--------------*/
//建议不要尝试给dojo.byId()获取的元素使用链式写法.. 会囧的..
dojo.query(".demo").style("color","red").removeClass("fontStyle").addClass("layoutStyle");
dojo.query(".demo").style({color:"red",fontWeight:"bold"}).removeClass("fontStyle").addClass("layoutStyle");
var node = dojo.byId("node");
dojo.addClass(node, "className");
//删除节点的所有子节点(简单描述: 清空节点) | 删除节点及其所有自己点(简单描述: 删除节点)
var node = dojo.byId("node");
dojo.empty(node);
dojo.destroy(node);
//移动节点(将"node"节点, 移动到"refNode"节点的"pos"位置)
//pos的参数类似上边创建节点(dojo.create)部分(未验证).
var node = dojo.byId("node");
var refNode = dojo.byId("refNode");
dojo.place(node, refNode, pos);
分享到:
相关推荐
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和API,包括对DOM(文档对象模型)的操作。在Dojo 1.6版本中,DOM操作是其核心特性之一,它允许开发者高效地创建、修改和管理HTML元素。以下是对...
### Dojo框架中DOM树操作相关API解析 在现代Web开发中,DOM(Document Object Model)树是网页结构的核心组成部分,而Dojo框架提供了一系列强大的API来操作DOM元素,极大地简化了开发者的编码过程。本文将详细介绍...
Dojo框架,作为一款开源的JavaScript库,为开发者提供了丰富的工具集,使得DOM操作变得更加简单、高效。其中,`dojo.byId()`方法便是Dojo中用于获取DOM元素的一个核心功能。 #### `dojo.byId()`方法详解 `dojo.by...
其中,`dojo/dom`和`dojo/query`模块用于DOM操作,`dojo/on`处理事件监听,`dojo/Deferred`则用于异步编程,而`dojo/request`则负责AJAX通信。 **3. UI组件** DOJO的`dijit`模块提供了大量的UI组件,如按钮、表格...
2. **dojo/_base**:这是Dojo的基础模块,包含了Dojo的基本功能,如对象创建、事件处理、DOM操作等。例如,`dojo/query`用于选择DOM元素,`dojo/on`用于监听事件。 3. **dojo/ready**:这个模块用于确保DOM加载完成...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在处理AJAX、DOM操作、动画效果以及模块化开发方面表现出色。标题提到的"dojo相关的js",显然指的是Dojo框架在JavaScript中的应用,...
而`dojo/dom-class`和` dojo/dom-style`模块则分别用于操作元素的类名和样式,增强了样式的灵活性。 在Ajax交互上,Dojo同样提供了强大的支持。通过`dojo/xhr`模块,开发者可以方便地实现各种异步请求。`dojo/...
3. **DOM操作**:Dojo提供了`dojo/dom`和`dojo/query`模块,用于高效地操作DOM元素。它们提供了类似于jQuery的API,方便查找、创建、修改和删除DOM节点。 4. **事件处理**:Dojo的`dojo/on`模块允许开发者监听和...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、AJAX交互以及模块化开发等。本实战教程将深入讲解Dojo的核心概念和实用技巧,通过具体的例子帮助你快速...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理以及数据存储等。本文将通过一系列实例,帮助初学者快速掌握Dojo的核心概念和使用方法。 首先...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理、数据存储等。在深入理解Dojo源码之前,我们首先需要对JavaScript库和模块化开发有一个基本的...
3. **dojo/dom**: 提供了一系列DOM操作的方法,如`dojo/dom-attr`用于获取或设置元素属性,`dojo/dom-class`处理CSS类名,`dojo/dom-style`操作元素样式。 4. **dojo/on**: Dojo的事件处理模块,它提供了跨浏览器的...
此外,Dojo还提供了一套强大的DOM操作API,如dojo.create、dojo.destroy和dojo.style,使得在JavaScript中操作DOM变得简单易行。 在数据交互方面,Dojo的dojo.xhr系列函数(如dojo.xhrGet、xhrPost)实现了与服务器...
总之,Dojo 提供了一个强大且全面的 JavaScript 开发框架,涵盖了模块化、事件处理、I/O、DOM 操作、图形和 URI 处理等多个方面。通过深入学习和理解这些模块和包,开发者可以构建高效、健壮的 Web 应用程序。
Dojo是Web开发中的一个开源工具集,尤其在富互联网应用程序(RIA)开发领域,它提供了丰富的功能和组件,包括AJAX、DOM操作、事件处理、动画效果、模块化开发等。 Dojo的核心特性之一是它的模块系统AMD...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、数据处理到AJAX通信等多个方面。在这个"dojo例子 各方法的用法"的压缩包中,我们很可能会找到关于如何使用Dojo库的各种...
无论是基本的 DOM 操作、页面加载事件处理,还是复杂的 DOM 事件绑定以及 AJAX 请求,Dojo 都能提供简洁而强大的解决方案。随着进一步的学习和实践,你将能够更深入地了解并充分利用 Dojo 的强大功能。
Dojo框架的核心功能包括模块系统、DOM操作、事件处理、动画效果、数据存储以及Ajax通信等。在dojo-release-1.1.2中,我们可以深入研究以下关键知识点: 1. **模块系统**:Dojo采用了一个名为AMD(Asynchronous ...