Dojo入门：DOM操作

作为一款功能齐全的js工具包，dojo提供了统一的DOM操作方法。

dojo.byId

dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点。该函数是标准 document.getElementById 函数的一个别名，但是显然简短易书写。

 

dojo.query

虽然dojo.byId可以方便的根据id来获取一个DOM节点，但是根据id获取每一个元素几乎是不可能的，因为id是唯一标识。如果一次想获取几个元素，我们可以通过dojo.query方法。

dojo.query 函数接受一个字符串参数，使用一个 CSS3 选择器引用您想选择的元素。这种操作方式很像jquery对DOM的操作。如果我们想获取页面中的某一个class的所有元素，只需要使用以下代码：

dojo.query(".class")

 

这个方法将返回一个NodeList，我们可以通过遍历这个list来操作每一个元素。

 

dojo.body

dojo.body方法返回document的body元素

 

dojo.create

dojo.create方法创建一个元素

 

dojo.destroy

dojo.destroy方法会从父元素中删除该元素，并删掉该元素的所有子元素

 

dojo.empty

dojo.empty方法将删除掉所有子元素

 

dojo.forEach

dojo.forEach方法允许为数组或NodeList定义一个迭代器，来访问数组或NodeList中的每一项，并提供相应的操作。

这个方法会忽略返回值，并且是不支持break的。

 

还有很多其它有用的方法，可以在http://dojotoolkit.org/api/ 查看

如果认为此文对您有帮助，别忘了支持一下哦！

作者：齐飞

来源：http://youring2.cnblogs.com/

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

转载：http://www.cnblogs.com/youring2/archive/2012/06/09/2543677.html

时间： 2024-10-28 14:40:12

Dojo入门：DOM操作的相关文章

AJAX入门---DOM操作HTML

AJAX入门---DOM操作HTML          一边学习AJAX一边坐着总结加深印象,上次写的是如何简单的使用XMLHttpRequest对象,今天写的是DOM(文档对象模型(Document Object Model))操作HTML,希望我的博客对大家的学习能够起到帮助作用.          一．什么是DOM          文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的

Hello dojo入门

经过了解几种Ajax框架,最后选择了Dojo框架.因为Ext不稳定,GWT觉得太浪费时间. 一:下载Dojo,地址是:http://dojotoolkit.org/downloads 二:做开发,当然要工具库的 API 帮助文档,就在下载地址的其它菜单中. 三:入门程序 Hello Dojo .一个简单的入门,可以增加兴趣与信心,同时,对 Dojo 有了简单的了解. 在 MyEclipse 中新建工程 ToDojo : 在 WebRoot 中新建一个文件夹 dojoroot ,把 Dojo 相关

JS写出兼容性Dom操作

一.前言 因为一个很小的项目或者说几个页面却要搭上Jquery,当然很不值,gzip下,好歹也有小几十K.为了能够方便的操作Dom,我们需要写很多兼容性的原生JS.就在我看leaflet的源码的时候,我觉得它的DomUtil写的还是不错的. 二.具体的代码分析 首先,我们定义一个类,var DomUtil = {  functionName: function(){ }  }; 以下均已字面量的形式表示. (1)get: 获取一个元素 get: function (id) { return ty

Ajax与DOM操作

ajax|dom 上一篇中 Brett 介绍了文档对象模型(DOM),它的元素在幕后定义了 Web 页面.这一期文章中他将进一步探讨 DOM.了解如何创建.删除和修改 DOM 树的各个部分,了解如何实现网页的即时更新!(注意,下面的讨论以上一篇文章 "利用 DOM 进行 Web 响应" 为基础,如果没有阅读过那一期,请在继续阅读之前首先阅读上一篇文章.) 如果阅读过本系列的上一篇文章,那么您就非常清楚当 Web 浏览器显示网页时幕后发生的一切了.当 HTML 或为页面定义的 CSS 发

Mootools DOM操作

Ajax开发中,做的最多的就是对DOM的操作, 增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩.所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题),让我们的开发事半功倍. mootools也提供了一套非常出色的解决方案,并且更OO. 首先,之前,通常我们创建DOM节点,都使用document.createElement()方法,而我们看mo

jQuery DOM操作小结与实例

DOM操作的分类:DOM CORE(核心).HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它.  它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML.  Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分.  2.

js使用DOM操作实现简单留言板的方法

 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元素的前面") 把新建的元素插入到页面中指定的标签前面,这样后面输入的内容才会显示到

DOM操作一些常用的属性汇总

 这篇文章主要介绍了DOM操作一些常用的属性汇总,总结的相当全面,附上示例,是篇非常不错的学习提高DOM操作的文章,推荐给大家.     1.DOM:文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 2.DOM的一些常用的属性 2.1 通过ID获取元素 (1)语法:   代码如下: document.getElementById("id");   (2)作用:id就

jQuery DOM操作实例

 本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份 都来加深印象吧,大家都知道jQuery很好使用,因为它简化了javascript代码,更重要的是它还兼容基本上所有的浏览器,网页开发最头疼的就是这个了,所以jQuery也因此深受码农的喜爱,不过首先你得要记住它才能更好的使用它不是吗,过久了没用的属性方法也会淡忘的,下面是jQuery的DOM操作方法属性的详解,看看加深下印象.   例子虽丑功能还俱全呢!   代码如下: <!DOCTYPE html>

AngularJS中的DOM操作用法分析_AngularJS

本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中