Dom使用方法的介绍
1．替换节点 replaceNode
替换节点必须是用父节点的元素去调用这个方法
举例：
<div id="bdy">
<select name="edu" id="edus">
<option value="博士" id="bs">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="本科" id="dz">大专</option>
</select>
</div>
<div>
<input type="text" id="uname" value="确定">
</div>
替换节点，把博士替换为大专：
//博士节点
var bsNode = document.getElementById("bs");
//父节点
var edusNode = bsNode.parentNode;
//替换的节点
var dzNode = document.getElementById("dz");
edusNode.replaceNode(dzNode,bsNode);
注：值得注意的是在替换的时候要保证两个都存在，一般情况下用id来来获取，所以应该有id
2.属性节点的使用（以上面的html的代码为例）
(1).getAttribute
getAttribute 通过元素节点来获取该节点的属性名
举例：
var edus = document.getElementById("edus");
var value = edus.getAttribute("name");
输出的结果为：edu
(2).getAttributeNode
getAttributeNode 通过元素节点来获取指定的属性名节点对象
举例：
var nameNode = edus.getAttributeNode("name");
alert(nameNode.nodeName+"-----"+nameNode.nodeValue+"===="+nameNode.nodeType);
(3).setAttribute
setAttribute(newNode,oldNode) 设置的属性值是有2个参数，意思是为哪个属性修改值，修改的值是多少
举例1：
edus.setAttribute("name","laowang");
执行的效果为：当执行之后，在页面中没有任何变化，但是当在修改之后输出的哈=话，就有变化。
举例2：改变input中的type，看看效果
var uname = document.getElementById("uname");
//设置type的属性值为button
uname.setAttribute("type","button");
//设置type的属性值为checkbox
uname.setAttribute("type","checkbox");
//得到改变后的type值
var value = uname.getAttribute("type");
//输出类型
alert(value);
执行的效果：在firefox中执行的效果可以明显的看出随着type的改变而改变，而在IE中没有显示，因为在IE中设置的属性的语句是无效的。
3．当选中复选框的时候触发的事件，并弹出选中的value值
var edus = document.getElementById("edus");
edus.onchange = function(){
//获取edus里面的所有的options节点
var options = this.getElementsByTagName("option");
//遍历
for(var i = 0;i<options.length;i++){
//判断是否选中
if(options[i].selected){
//打印出结果
alert("你改变了选择："+options[i].value);
}
}
}
弹出选中的value值还可以这么写，简化：
edus.onchange = function(v){
alert(v.explicitOriginalTarget.label);
}
4．getElementsByName
//获取的是name=fav的所有节点对象
var favs = document.getElementsByName("fav");
//遍历出节点的value值
for(var i = 0;i<favs.length;i++){
//得到一个具体的节点
var fav = favs[i];
//注册事件
fav.onclice = function(){
alert("真的喜欢"+this.value+"?");
}
}
5．getElementsByTagName
使用的html为：
<div id="spr">
你喜欢的小品和歌曲是谁？<br/>
<hr color="red"/>
<input type="checkbox" name="fav" value="荆轲刺秦">荆轲刺秦
<input type="checkbox" name="fav" value="面试">面试
<input type="checkbox" name="fav" value="穿越">穿越
<input type="checkbox" name="fav" value="因为爱情">因为爱情
</div>
getElementsByTagName 获取edus下面的指定的元素名称的value值
举例1 ：
var edus = document.getElementById("edus");
var options = edus.getElementsByTagName("option");
var msg = "";
//遍历所有的option的value值
for(var i = 0;i<options.length;i++){
msg+=" value="+options[i].value+"----";
}
alert(msg);
执行的效果为：
value=博士---- value=硕士---- value=本科---- value=大专 ----
举例2:
使用的getElementById举例（以以上的代码为例）：
//根据标签名称获取该标签名称的input的节点
var inputNodes = document.getElementsByTagName("input");
//获取指定节点中的所有input对象
var sprNode = document.getElementById("spr");
//getElementsByTagName可以归某个节点所有 sprNode必须是元素节点才可调研
var sprInputsNodes = sprNode.getElementsByTagName("input");
//打印出spr节点中所有的input节点对象，并且要求type=“checkbox”
//遍历所有的spr里边的节点
for(var i = 0;i<sprInputsNodes.length;i++){
//获取指定的节点
var inputNode = sprInputsNodes[i];
if(inputNode.type=="checkbox"){
alert(inputNode.value);
}
}
注： 从以上的代码中可以看出getElementsByTagName的调用对象不止是document，也可以是元素节点
6.创建元素节点 createElement
以下面这段html为例：
<div id="bdy">
</div>
举例代码为：
//创建元素
var inputNode = document.createElement("input");//返回的是元素节点
//为元素赋值
inputNode.setAttribute("type","text");
inputNode.setAttribute("name","uname");
//获取指定的节点
var bdyNode = document.getElementById("bdy");
//给指定的节点添加子节点
bdyNode.appendChild(inputNode);//添加到末尾