本文介绍了Dojo框架中DOM工具的使用方法，包括类操作、样式设置、属性管理及节点查询等功能，帮助开发者高效地操作网页元素。
web前端之精通dojo七：DOM工具
核心Dojo DOM工具函数
文档:DOM中的”D”:
如果没有document(文档),DOM无从谈起。
对象:DOM中的”O”:
用户定义对象(user-defined object):有程序员自行创建的对象
内建对象(native object):内建在JavaScript语言里的对象,如Array、Math、Date等
宿主对象(host object):由浏览器提供的对象,如window
模型:DOM中的”M”:
DOM代表着加载到浏览器窗口的当前网页,浏览器提供了网页的模型,我们就通过JavaScript去读取这个模型 详情介绍
Dojo为我们提供了替代JavaScript的函数：
1、dojo.hasClass/dojo.addClass/dojo.removeClass/dojo.toggleClass：测试、添加、删除、切换一个节点的class属性中的类字符串。这些函数可帮助你简化一系列操作class时所必需的字符串处理
2、dojo.style：获得和设置一个节点的样式，规范浏览器的不兼容性
3、dojo.attr/dojo.hasAttr/dojo.removeAttr：从一个节点获得和设置/测试/删除属性值。
所有这些函数的第一个参数，要么是目标函数DOM节点，要么是标示目标DOM节点的id字符串。如果所给的是一个id字符串，那么目标DOM节点是通过调用dojo.byId获取的。
类函数
类函数(hasClass、removeClass、toggleClass、addClass)都携带两个参数，即一个节点和一个类字符串。通常这个类字符串只包含单个类名，但这并不是必须的。
//获取一个用来操作的节点
var node=dojo.byId("node");
undefined
//将类名添加到右边
dojo.addClass(node,"c1");
node.className
"c1"
//添加一个已有类不会有效果
dojo.addClass(node,"c1");
node.className
"c1"
dojo.addClass(node,"c2");
node.className
"c1 c2"
dojo.hasClass(node,"c1");
true
dojo.hasClass(node,"c1 c2");
true
dojo.hasClass(node,"c3");
false
dojo.removeClass(node,"c1");
node.className
"c2"
dojo.toggleClass(node,"c2");
node.className
""
dojo.toggleClass(node,"c2");
node.className
"c2"dojo.style
dojo.style(node)
CSSStyleDeclaration {...}
//三个参数的变量，雷同于setter
dojo.style(node,"border","2px solid black")
"2px solid black"
//两个参数的变量，雷同于getter
dojo.style(node,"border");
"2px solid rgb(0, 0, 0)"
dojo.style(node,"borderTopWidth");
2
属性函数
属性函数的参数为一个DOM节点或id字符串、一个属性名称（字符串）以及一个可选的属性值（字符串）。两参数的版本用于测试、取得或移除这些属性，三参数的版本用于设置属性。
dojo.attr(node,"name","foo")
<div id="node" class="c2 c1 c3 c4" name="foo" style="border: 2px solid black;"></div>
dojo.attr(node,"name");
"foo"
dojo.hasAttr(node,"name");
true
dojo.removeAttr(node,"name");
dojo.hasAttr(node,"name")
false还存在一个候选的两个参数setter：
dojo.attr("node",{
tabIndex:"-1"
,customAttr:"value"
,title:"node"
});
<div id="node" class="c2 c1 c3 c4" style="border: 2px solid black;" tabindex="-1" customattr="value" title="node"></div>查找和编辑节点
dojo.query
dojo.query方法接受一个CSS选择器，返回匹配选择器的节点的一个数组，并保存在DojoNodeList对象中返回。这个对象的行为使它看起来就像是Array的子类。
dojo.query还接受可选的第二个参数，要求它在某一个DOM子树中进行查询。如果第二个参数缺失，那么就假定为”document”。给定子树就限制了查询范围，有时会产生极高的效率。通常在指定DOM节点时，既可以直接传入一个引用，又可以传入一个id字符串。
dojo.query(“div.questions p”).forEach(function(node,i){
dojo.addClass(node,(i%2) ? “lightBand” : “darkBand”);
});
代码设置了奇数行的class属性为lightBand，偶数行的为darkBand
同样的方法也可以用来设置表格的标题段落：
dojo.addClass(dojo.query(“form > p”)[0],”formTitle”);
这里有一个大问题。dojo.query总是返回一个DojoNodeList对象。它不关心指定的css选择器是否只找到一个元素。所以当你需要访问一个NodeList时，就算它只有一个元素，你也必须采用[0]来选择第一个元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>查找和编辑节点</title>
<style type="text/css">
*{
margin: 0;
border: 0;
padding: 0;
font-family: arial;
}
body{
background: #fcfcfc;
}
.formTitle{
padding: .5em;
font-size: larger;
font-weight: bold;
}
div.question{
overflow: hidden;
}
.questions{
border-top: 2px solid black;
border-bottom: 2px solid black;
padding: 1em;
}
.questions p{
padding: .5em;
}
.lightBand{
background: #EFEFEF;
}
.darkBand{
background: #E0E0E0;
}
.choice{
float: left;
padding: .5em;
}
</style>
<script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
(function(){
function layout1(){
dojo.query("div.questions p").forEach(function(node,i){
dojo.addClass(node,(i%2) ? "lightBand" : "darkBand");
});
dojo.addClass(dojo.query("form > p")[0],"formTitle");
}
dojo.addOnLoad(layout1);
})();
</script>
</head>
<body>
<div>
<form>
<P>标题标题标题标题标题标题标题标题</P>
<br>
<div class="questions">
<p>
<span><input type="radio" name="q1" value="yes">yes</span>
<span><input type="radio" name="q1" value="no">no</span>
美好的一天1？
</p>
<p>
<span><input type="radio" name="q1-yes" value="yes">yes</span>
<span><input type="radio" name="q1-yes" value="no">no</span>
<span><input type="radio" name="q1-yes" value="maybe">Don't know</span>
恐怖的一天1？
</p>
<p>
<span><input type="radio" name="q2" value="yes">yes</span>
<span><input type="radio" name="q2" value="no">no</span>
美好的一天2？
</p>
<p>
<span><input type="radio" name="q2-yes" value="yes">yes</span>
<span><input type="radio" name="q2-yes" value="no">no</span>
<span><input type="radio" name="q2-yes" value="maybe">Don't know</span>
恐怖的一天2？
</p>
<p>
<span><input type="radio" name="q3" value="yes">yes</span>
<span><input type="radio" name="q3" value="no">no</span>
美好的一天3？
</p>
<p>
<span><input type="radio" name="q3-yes" value="yes">yes</span>
<span><input type="radio" name="q3-yes" value="no">no</span>
<span><input type="radio" name="q3-yes" value="maybe">Don't know</span>
恐怖的一天3？
</p>
<p>
<span><input type="radio" name="q4" value="yes">yes</span>
<span><input type="radio" name="q4" value="no">no</span>
美好的一天4？
</p>
<p>
<span><input type="radio" name="q4-yes" value="yes">yes</span>
<span><input type="radio" name="q4-yes" value="no">no</span>
<span><input type="radio" name="q4-yes" value="maybe">Don't know</span>
恐怖的一天4？
</p>
</div>
</form>
</div>
</body>
</html>
dojo.query选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>查找和编辑节点</title>
<script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
</head>
<body>
<div id="fixture">
<div class="section1">
<h1>
Section 1
</h1>
<p>
Introduction Text
</p>
<div class="section1-1">
<h2>
Section 1.1
</h2>
<p>
Section 1.1 Paragraph-1
</p>
<p class="special">
Section 1.1 ,Paragraph-2(class=special)
</p>
<p myAttrib="special">
Section 1.1 ,Paragraph-3(myAttrib=special)
</p>
<p myAttrib="special-1 special-2 special-3">
Section 1.1 ,Paragraph-4(myAttrib=special-1 special-2 special-3)
</p>
</div>
</div>
</div>
<div class="queryTester" style="background:#ddd;padding:5px;">
<form id="qform">
输入对应的选择器字符串：
<input id="query" type="text" name="querySelector" size="40">
<input type="submit">
</form>
</div>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("qform"),"submit",function(e){
//阻止默认处理函数以及传递
dojo.stopEvent(e);
//删除所有之前的边框
dojo.query("*","fixture").style("border","");
//让所有找到的元素，显示红色边框
var query=dojo.byId("query").value;
dojo.query(query,"fixture").style("border","2px solid red");
});
});
</script>
</body>
</html>例如：输入“.special”进行查看
dojo.NodeList能做什么
NodeList对象是一些附加对象方法的数组。他们包括全部的JavaScript核心Array方法（concat、join、pop、rest）。它们将和数组一样工作。例如，给定一个myNodeList（假设他是NodeList），myNodeList.slice(2,5)将会返回一个新的NodeList对象，这个对象包含了myNodeList中的第三个到第五个元素。
NodeList包括一些对每个元素都适用的公有句法分析方法。这些方法总结如下（myNodeList是一个NodeList的对象）:
coords：使用dojo.coords得到每个节点的top、left、height和width
attr：使用dojo.attr得到或者设置一个HTML的每个节点的属性。get函数返回一个属性值数组。set函数返回NodeList自身。
style：除了dojo.style之外，其他的都类似于attr
addClass：使用dojo.addClass对每个节点添加了类(class)字符串，它返回这个NodeList自身
removeClass：和addClass类似
place：使用dojo.place将一个节点和一个引用节点放在一起。可以使用DOM节点或者一个查询字符给出引用节点
dojo.place接受一个源节点、一个参考节点和一个位置信息（“before”、“after”、“first”、“last”、一个整数或者忽略该参数来代表“last”）
connect：使用dojo.connect将一个处理函数和事件关联起来
orphan：使用DOM函数Node.removeChild移出被其父节点过滤器捕获的节点。这些节点也在NodeList中被移除了。过滤器必须是CSS选择器的一个表达式（例如：.someclass）如果过滤器消失，那么所有在NodeList中的节点将被移除。它返回被移除的节点。注意，因为节点被返回了，所以他们并没有被销毁。
扫一扫
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
