(6)Dojo学习之DOM操作
来源:互联网 发布:网络程序员 编辑:程序博客网 时间:2024/05/17 00:09
- 引言
- Dojo模块操作DOM
- 1 dojodom操作DOM结点
- 2 dojodom-construct操作DOM结点
- 21使用create方法操DOM
- 22 使用destroynode方法销毁一个结点
- 23 使用empty清空节点
- 24使用place方法插入一个节点
- 3 dojodom-prop操作DOM节点
- 4 dojodom-form模块操作表单
- 5 剩余的模块操作DOM元素
- 51 dojodom-attr模块的使用
- 52 dojodom-class模块的使用
- 53 dojodom-style模块的使用
- 总结
1.引言
在JavaScript中不可避免的要和DOM元素打交道,在本篇博客中就来看一看Dojo封装好的DOM操作模块,其中主要有:
dojo/dom
模块dojo/dom-construct
模块dojo/dom-attr
模块dojo/dom-prop
模块dojo/dom-class
模块dojo/dom-style
模块dojo/dom-form
模块
接下来我们就来看一看这些模块的用法,如何使用这些模块操作我们的DOM节点。
2. Dojo模块操作DOM
2.1 dojo/dom
操作DOM结点
关于dojo/dom
模块的使用,主要是用于获取dom结点,在该模块中最常用的一个方法便是dom.byId()
方法,使用该方法可以获得html中的DOM元素,在低版本之前没有dojo/dom
模块,老版本中使用dojo.byId()
方法获得dom结点,但是随着版本的提示dojo.byId()
已经逐渐被淘汰了。
现在我们来看一下dojo/dom
模块的简单用法。
- 首先我们创建一个button和一个div.(我们点击按钮的时候,修改div的内容)
<button id="btn">修改div的内容</button> <div id="myDiv"></div>
- 然后我们使用
dojo/on
给按钮绑定事件,然后通过dom.byId
获得dom元素,从未修改div的内容
require(["dojo/dom","dojo/on","dojo/domReady!"], function(dom,on) { on(dom.byId("btn"),"click", function () { dom.byId("myDiv").innerHTML="div的内容被修改了"; }) });
- 运行结果
2.2 dojo/dom-construct
操作DOM结点
在dojo/dom-construct
模块中主要有四种常用的方法:create
,destroy
,empty
,place
.其中create
主要用于创建DOM节点,destroy
主要用于销毁节点,empty
用于将某一个节点的子节点清空,place
主要用于将DOM结点插入到指定位置。
2.2.1使用create
方法操DOM
使用
create
创建DOM元素,其中create(tag,attrs,refNode,pos)
方法有四个参数。第一个参数(必需参数):标签的种类。第二个参数(必需参数):标签的属性。第三个参数(可选参数):一个DOM引用。第四个参数(可选参数):相对于第三个DOM引用参数所处的位置,默认为last
,还可以填写first
,after
,before
,last
,replace
,only
。接下来我们用一个例子来说明这个方法的使用创建一个DOM列表
<ul id="list"> <li id="Two">Two</li> <li id="Three">Three</li> <li id="Four">Four</li> <li id="Five">Five</li> <li id="Six">Six</li> </ul>
- 利用
create(tag,attrs,refNode,pos)
方法插入一个DOM结点
require(["dojo/dom","dojo/dom-construct","dojo/domReady!"], function(dom,domConstruct) { //获得list节点 var list = dom.byId("list"); //创建一个li标签,然后标签innerHtml属性为one //然后将创建的li结点插入到list标签的头部 domConstruct.create("li", { innerHTML: "one" }, list,"first"); });
2.2.2 使用destroy(node)
方法销毁一个结点
- 创建我们的DOM元素
<ul id="list"> <li id="Two">Two</li> <li id="Three">Three</li> <li id="Four">Four</li> <li id="Five">Five</li> <li id="Six">Six</li> </ul>
- 使用
destroy
方法销毁节点
require(["dojo/dom","dojo/dom-construct","dojo/domReady!"], function(dom,domConstruct) { //获得list节点 var list = dom.byId("list"); //删除list节点 domConstruct.destroy(list); });
- 运行结果(注意body标签里面没有
ul
标签了,注意和empty
方法的区别)
2.2.3 使用empty
清空节点
- DOM节点
<ul id="list"> <li id="Two">Two</li> <li id="Three">Three</li> <li id="Four">Four</li> <li id="Five">Five</li> <li id="Six">Six</li> </ul>
- 清空节点
require(["dojo/dom","dojo/dom-construct","dojo/domReady!"], function(dom,domConstruct) { //获得list节点 var list = dom.byId("list"); //删除list节点 domConstruct.empty(list); });
- 运行结果(注意:body里面是由
ul
标签的,注意和destroy
方法的区别)
2.2.4使用place
方法插入一个节点
首先我们看一下这个方法的参数
place(node,refNode,position)
,前两个参数是DOM结点的引用,第三个参数是一个相对位置,如果大家熟悉create
,第三个参数和create
方法中的第四个参数是类似的。接下来我们用代码来感受一下:DOM节点
<ul id="list"> <li id="Two">Two</li> <li id="Three">Three</li> <li id="Four">Four</li> <li id="Five">Five</li> <li id="Six">Six</li> </ul>
- 使用place插入节点(感受一下和
create
方法的区别)
require(["dojo/dom","dojo/dom-construct","dojo/domReady!"], function(dom,domConstruct) { //获得list节点 var list = dom.byId("list"); //创建一个节点 var li=domConstruct.create("li", { innerHTML: "one" }); //将li节点插入的list中 domConstruct.place(li,list,"first"); });
2.3 dojo/dom-prop
操作DOM节点
关于dojo/dom-prop
模块的使用非常简单,就只有两个方法get
, set
方法,这两个方法一个是设置dom的属性一个是取得dom的属性,接下来用一个例子来看一下这个模块的使用。
- 创建html标签(修改之前标签显示aaa)
<input id="txt1" type="text" value="aaa"><input id="txt2" type="text" value="aaa">
- js代码
require(["dojo/dom","dojo/dom-prop","dojo/domReady!"], function(dom,domProp) { //获得txt1节点 var txt1 = dom.byId("txt1"); //获得txt2节点 var txt2 = dom.byId("txt2"); //获得txt1属性 var txt1value=domProp.get(txt1,"value"); //弹出属性 alert(txt1value) //修改txt2属性的属性值 domProp.set(txt2,"value","bbb"); });
- 运行结果
2.4 dojo/dom-form
模块操作表单
使用该模块可以将表单里面的内容序列话为JSON对象
- 创建一个表单
<form id="form"> <input name="txt1" type="text" value="txt1"> <input name="txt2" type="text" value="txt2"> <input name="txt3" type="text" value="txt3"> <input name="txt4" type="text" value="txt4"> <input id="btn" type="button" value="序列化为json对象"> </form>
- 点击按钮序列话为json对象
require(["dojo/dom","dojo/dom-form","dojo/on","dojo/domReady!"], function(dom,domForm,on) { on(dom.byId("btn"),"click", function () { var json=domForm.toJson(dom.byId("form")) alert(json.toString()); }) });
- 运行结果
2.5 剩余的模块操作DOM元素
前面介绍了四种模块,这四种模块都可以操纵DOM元素,还剩下三种模块,即:dojo/dom-attr
,dojo/dom-class
,dojo/dom-style
这三种模块的使用和前四种模块的使用都大同小异,我就简单的介绍一下这三种模块都可以实现什么样子的效果。
2.5.1 dojo/dom-attr
模块的使用
get(node,name)
:用户获得node元素的属性值has(node,name)
:判断node元素是否有某种属性remove(node,name)
:删除node元素的某种属性set(node,name,value)
:设置node元素属性值(注意这里是属性值)getNodeProp(node,name)
:获得node元素的属性,这里注意,可以获得一个json类型的属性,比如class属性
2.5.2 dojo/dom-class
模块的使用
dojo/dom-class
模块主要是判断DOM元素的class属性。该模块有以下的方法。
add(node,classStr)
:给node节点添加一个样式contains(node,classStr)
:判断node节点是否有某种样式remove(node,classStr)
:移除node节点中的某种样式replace(node,addClassStr,removeClassStr)
:替换node节点中的样式toggle(node,classStr,condition)
交替的改变node的样式
2.5.3 dojo/dom-style
模块的使用
该模块主要是获得DOM节点的style属性,该模块主要有一下的方法
get(node,name)
:获得node节点的属性值getComputedStyle(node)
:获得node节点style属性值:注意这里是一个json对象
3.总结
在本篇博客中主要介绍了dojo中如何去操作DOM节点,然后又介绍了几种关于DOM节点模块。在本博客中,关于选择DOM节点只是介绍了dom.byId
方法,dom.byId
方法只能通过DOM的id属性选择DOM元素。这是远远不够的,在真实的需求中,这个方法的功能还不是很强大,在下一篇博客中将会介绍dojo中的样式选择器,也就是dojo/query
模块,使用该模块我们可以实现更加强大的功能,选择DOM元素时也将更加的方便。
- (6)Dojo学习之DOM操作
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)
- dojo 的DOM操作 dojo/dom
- Dojo入门:DOM操作
- dojo dom操作
- dojo/dom源码学习
- dojo之Dom工具
- DOJO(二) 基本DOM操作
- Dojo学习笔记(7. dojo.dom)
- Dojo学习笔记(7. dojo.dom)
- dojo 学习日记 之 数组操作
- jQuery学习之文档(DOM)操作
- javascript学习之DOM操作
- jquery学习之DOM操作
- (4)Dojo学习之动画学习
- js,jquery和dojo操作dom
- (1)Dojo学习之简单配置
- (2)Dojo学习之模块化
- 算法之路三:HDU OJ:2006
- 题解小白逛公园(zkw线段树造树修改+回溯查询写法)
- MongoDB使用小结
- 神经网络深入(连载2)直接编码
- char型和数值型之间的转换
- (6)Dojo学习之DOM操作
- 神经网络深入(连载3)间接编码
- Pandas写入DataFrame到MongoDB数据库
- 静态连接器动态连接器
- Android自定义View之ListView实现时间轴效果:我只是个送快递的。
- 第一章 Activity的生命周期和启动模式
- SQL TRUNCATE TABLE和DELETE的区别
- 阿尔法套利简介
- CSS基础总结