`

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);
分享到:
评论

相关推荐

    Dojo框架1.8,Dojo 是目前最流行的开源 JavaScript 工具库之一

    Dojo 为 Web 应用的开发提供了大量的客户端组件,能够让你可以方便的进行 HTML DOM 操作、拖拽、AJAX 调用、定制可视化控件等来使得你的 Web 应用变成富网络应用 (RIA)。而且 Dojo 在性能、可访问性、多语言支持以及...

    dojo快速入门.doc

    它是轻量/健壮的,提供工具来实现DOM操作,动画,ajax,event 和键盘标准化, 国际化I18N,可访问性(a11y).Dojo基本上是单独一个轻量级的实体(26kb). Dojo是完全免费的,又一组活跃于社区的developer开发。

    Web开发资料大全(文档手册案例等) 2【CSS JS Dom JQuery Ajax Dojo Prototype ASP SQL 截图工具 颜色选择 】

    Web开发资料大全(文档手册案例等) 【CSS JS Dom JQuery Ajax Dojo Prototype ASP SQL 截图工具 颜色选择 】

    dojo:Dojo 1-Dojo 1工具包核心库

    dojo软件包涵盖了广泛的功能,例如Ajax,DOM操作,类类型编程,事件,promise,数据存储,拖放和国际化库。正在安装安装说明可在。入门如果您开始使用Dojo,则可以使用以下资源:使用Dojo的目的和时间以下是Dojo...

    《实战Dojo工具包》-电子文档下载(PDF)

    当你在建造JavaScript富客户端应用时,你会遇到大量令人烦恼的事情。浏览器的兼容性、对于降 级(degradation)的支持、混杂在一起的DOM处理、还有那些鲜血淋淋的hack技巧(例如离线存储), 所有这些事情都会冒...

    Dojo入门手册.rar

    2 Dojo工具包:JavaScript开发的水槽(Kitchen Sink)..........3 3 设置和配置Dojo................................. 4 3.1 选择正确的Dojo........... 4 3.1 选择正确的Dojo创建.............4 3.2 动态加载 ...

    轻松AJAX by dojo

    Dojo中包含有很多JavaScript编写的子package,负责处理当你在建造一个JavaScript应用时通常 必须要自己来编写的基础(infrastructure)工作。它封装了跨浏览器的令人烦恼的代码,这样你就不 必担心它们会...

    audio5js-bower:Audio5js Bower 包

    库不可知- Audio5js 不依赖于任何外部库,如 jQuery 或 Dojo,将 DOM 操作部分留给您。 多编解码器- Audio5js 假设您希望支持任何常用的音频编解码器,而不仅仅是 MP3。 轻量级- Audio5js 不会尝试实现基本 ...

    Getting Started with Dojo

    Paperback: 250 pages Publisher: friends of ED; 1st Edition. edition (January 6, 2010) Language: English ISBN-10: 1430225211 ISBN-13: 978-1430225218

    实战-Dojo工具包 实战-Dojo工具包

    当你在建造JavaScript富客户端应用时,你会遇到大量令人烦恼的事情。浏览器的兼容性、对于降 级(degradation)的支持、混杂在一起的DOM处理、还有那些鲜血淋淋的hack技巧(例如离线存储), 所有这些事情都会冒...

    实战Dojo工具包

    当你在建造JavaScript富客户端应用时,你会遇到大量令人烦恼的事情。浏览器的兼容性、对于降 级(degradation)的支持、混杂在一起的DOM处理、还有那些鲜血淋淋的hack技巧(例如离线存储), 所有这些事情...

    Getting_StartED_with_Dojo.rar

    its apparent complexity, nestled snug against the Document Object Model (DOM), JavaScript can be a tremendous tool in your everyday web development toolkit for adding rich interactivity, animations, ...

    doko.js:跟踪哪些 JavaScript 代码更改了您的 DOM

    Dojo.js 需要在任何其他脚本之前运行,所以将它放在其他脚本之前的最顶部。 [removed][removed] 可选的 此外,根据您使用的库,您可能需要指定您希望防止显示为潜在源位置的外部库。 这是因为我们跟踪客户端 DOM ...

    dijit-pagination-js:用于分页结果的 Dojo Dijit

    这个 Dojo 小部件在您选择的 DOM 元素中呈现一个分页列表,以便您可以轻松地对结果进行分页。 入门 将 dojo 配置添加到您的 HTML 头中 < script > // host path regular expression var pathRegex = new ...

    dojo-complete

    用于 Atom 的 dojo-complete 不记得完整的 dojo 模块名称? 别担心! 如果您知道要查找的... 例如,如果您想使用 dojo/dom-construct 模块,您可以使用符号: #domConstruct 目前这个模块支持 dojo 和 dijit 库。

    Xpage学习笔记

    // dojo.connect(dojoBtn.domNode,"onclick","showDia"); dojo.connect(dojoBtnNode,"onclick","showDia"); } dojo.addOnLoad(btnDemo);]]> 2.5.1.2 使用xpage按钮控件 按钮控件"> <![CDATA[ var ...

    手把手教你创建HTML5JavaScript动画特效

    在前面的一系列教程中,我们已经学习了如何使用并操作DOM节点,处理DOM事件。但是当我们在对DOM节点进行操作时,有些转换会显得突兀:例如删除一个节点,在用户看来它就会在页面上突然消失,有时这种页面上的突然...

    基于J2EE的Ajax宝典.docx

    内容涵盖丰富,除介绍 Ajax 的各种相关知识(如 JavaScript,DOM 和 XML)之外,还详细介绍了 5 个目前流行的 Ajax框架:Prototype.js,Dojo,DWR,JSON-RPC-Java 和 AjaxTags,并通过实际示例讲述了如何使用这 5 ...

    创建一个属于你自己的JavaScript库

    当你刚入门时,利用jQuery是一件非常奇妙的事,主要是因为它的DOM操作。首先,DOM对于入门者来说可能是相对困难的事情;其次用它我们几乎可以不用考虑跨浏览器兼容的问题。在这个教程中,我们将试着从头开始实现一个...

    PureDom:基于纯 Javascript 的 HTML Builder 库作为模板的替代品

    PureDom 是一种高效的 HTML 构建器和 DOM 转换器,针对最新的浏览器引擎进行了优化,但主要针对与 Node JS 和 MVC 框架一起使用,作为 HTML 模板的替代品。 它旨在将模型数据转换为语义 HTML。 PureDom 不关心遗留...

Global site tag (gtag.js) - Google Analytics