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元素时也将更加的方便。