`

DOJO js 基本dom操作

 
阅读更多

/**
 ** 基本的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);
分享到:
评论

相关推荐

    dojo1.6关于DOM相关操作的官方介绍

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和API,包括对DOM(文档对象模型)的操作。在Dojo 1.6版本中,DOM操作是其核心特性之一,它允许开发者高效地创建、修改和管理HTML元素。以下是对...

    dojo对DOM树的操作相关api pdf格式

    ### Dojo框架中DOM树操作相关API解析 在现代Web开发中,DOM(Document Object Model)树是网页结构的核心组成部分,而Dojo框架提供了一系列强大的API来操作DOM元素,极大地简化了开发者的编码过程。本文将详细介绍...

    dojo对DOM树的关于byid() pdf格式

    Dojo框架,作为一款开源的JavaScript库,为开发者提供了丰富的工具集,使得DOM操作变得更加简单、高效。其中,`dojo.byId()`方法便是Dojo中用于获取DOM元素的一个核心功能。 #### `dojo.byId()`方法详解 `dojo.by...

    DOJO.js 最优秀的js 框架 1.9.3

    其中,`dojo/dom`和`dojo/query`模块用于DOM操作,`dojo/on`处理事件监听,`dojo/Deferred`则用于异步编程,而`dojo/request`则负责AJAX通信。 **3. UI组件** DOJO的`dijit`模块提供了大量的UI组件,如按钮、表格...

    dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程

    2. **dojo/_base**:这是Dojo的基础模块,包含了Dojo的基本功能,如对象创建、事件处理、DOM操作等。例如,`dojo/query`用于选择DOM元素,`dojo/on`用于监听事件。 3. **dojo/ready**:这个模块用于确保DOM加载完成...

    dojo相关的js

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在处理AJAX、DOM操作、动画效果以及模块化开发方面表现出色。标题提到的"dojo相关的js",显然指的是Dojo框架在JavaScript中的应用,...

    dojo-release-1.9.0-src.zip dojo javascript库源码

    而`dojo/dom-class`和` dojo/dom-style`模块则分别用于操作元素的类名和样式,增强了样式的灵活性。 在Ajax交互上,Dojo同样提供了强大的支持。通过`dojo/xhr`模块,开发者可以方便地实现各种异步请求。`dojo/...

    dojo1.1 javascript框架

    3. **DOM操作**:Dojo提供了`dojo/dom`和`dojo/query`模块,用于高效地操作DOM元素。它们提供了类似于jQuery的API,方便查找、创建、修改和删除DOM节点。 4. **事件处理**:Dojo的`dojo/on`模块允许开发者监听和...

    dojo实战+实用例子

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、AJAX交互以及模块化开发等。本实战教程将深入讲解Dojo的核心概念和实用技巧,通过具体的例子帮助你快速...

    dojo入门实例介绍

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理以及数据存储等。本文将通过一系列实例,帮助初学者快速掌握Dojo的核心概念和使用方法。 首先...

    dojo源码

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理、数据存储等。在深入理解Dojo源码之前,我们首先需要对JavaScript库和模块化开发有一个基本的...

    dojo的源码

    3. **dojo/dom**: 提供了一系列DOM操作的方法,如`dojo/dom-attr`用于获取或设置元素属性,`dojo/dom-class`处理CSS类名,`dojo/dom-style`操作元素样式。 4. **dojo/on**: Dojo的事件处理模块,它提供了跨浏览器的...

    dojo中文文档-dojo手册

    此外,Dojo还提供了一套强大的DOM操作API,如dojo.create、dojo.destroy和dojo.style,使得在JavaScript中操作DOM变得简单易行。 在数据交互方面,Dojo的dojo.xhr系列函数(如dojo.xhrGet、xhrPost)实现了与服务器...

    DOJO 学习笔记 dojo

    总之,Dojo 提供了一个强大且全面的 JavaScript 开发框架,涵盖了模块化、事件处理、I/O、DOM 操作、图形和 URI 处理等多个方面。通过深入学习和理解这些模块和包,开发者可以构建高效、健壮的 Web 应用程序。

    精通dojo 代码 javascript库

    Dojo是Web开发中的一个开源工具集,尤其在富互联网应用程序(RIA)开发领域,它提供了丰富的功能和组件,包括AJAX、DOM操作、事件处理、动画效果、模块化开发等。 Dojo的核心特性之一是它的模块系统AMD...

    dojo例子 各方法的用法

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、数据处理到AJAX通信等多个方面。在这个"dojo例子 各方法的用法"的压缩包中,我们很可能会找到关于如何使用Dojo库的各种...

    dojo快速入门文档

    无论是基本的 DOM 操作、页面加载事件处理,还是复杂的 DOM 事件绑定以及 AJAX 请求,Dojo 都能提供简洁而强大的解决方案。随着进一步的学习和实践,你将能够更深入地了解并充分利用 Dojo 的强大功能。

    Dojo构建Ajax应用程序源码(包括书中用到的dojo-release-1.1.2)

    Dojo框架的核心功能包括模块系统、DOM操作、事件处理、动画效果、数据存储以及Ajax通信等。在dojo-release-1.1.2中,我们可以深入研究以下关键知识点: 1. **模块系统**:Dojo采用了一个名为AMD(Asynchronous ...

Global site tag (gtag.js) - Google Analytics