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);//添加到末尾