快捷導航

javascript dom 操作詳解 js加強

更新時間：2009年07月13日 20:35:35 作者：

javascript dom 操作詳解 js加強操作實現(xiàn)代碼。

1 、文檔里的每個節(jié)點都有屬性 nodeName 、 nodeValue 、 nodeType
nodeName 文本節(jié)點的的節(jié)點名是 #text , nodeName 是只讀屬性
nodeValue 1 元素節(jié)點 2 屬性節(jié)點 3 文本節(jié)點只讀屬性
nodeType 不能用于元素節(jié)點返回 null
2 、 getElementsByTagName 返回一個節(jié)點集合
3 、 firstChild 、 lastChild 第一個元素節(jié)點，最后一個元素節(jié)點
4 、 childNodes 返回所有子節(jié)點列表
5 、 previousSibling 前一個兄弟節(jié)點 nextSibling 后一個兄弟節(jié)點 parentNode 返回父節(jié)點
6 、 hasChildNodes 文本節(jié)點可以作為元素節(jié)點的子節(jié)點，文本節(jié)點和屬性節(jié)點不可能再包含任何子節(jié)點
7 、 appendChild(node) 追加節(jié)點
8 、 removeChild() 移除一個節(jié)點
可以借用子節(jié)點的得到父節(jié)點，然后移除子節(jié)點。
9 、 replaceChild() 替換方法，有兩個參數(shù)，把第一個參數(shù)的內(nèi)容替換掉第二個參數(shù)的內(nèi)容
如果兩個都存在在 dom 中，第一個會出現(xiàn)在第二個的位置，而第二個將消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、創(chuàng)建節(jié)點
setAttribute() 為一個元素節(jié)點增加屬性
createElement() 創(chuàng)建一個元素節(jié)點
createTextNode() 創(chuàng)建一個文本節(jié)點
用這三個方法可以添加任何節(jié)點。
12 、 innerHTML 內(nèi)部的 html 既可以得到，也可以設(shè)置
這里有一個例子，聯(lián)動選擇地市，地市信息在 xml 中
13 、調(diào)用函數(shù)時
1 、
node.onclick = xxx(); 得到函數(shù)的返回值，也就是執(zhí)行了該函數(shù)
2 、
node.onclick = function(){
xxx();
}
得到了該函數(shù)的引用，只有觸發(fā)該事件時才執(zhí)行。
14 、動態(tài)數(shù)組的刪除：即數(shù)組中的某個元素刪除后后面的元素會自動向前一格。
[“ 山東 ”, “ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 會是
[“ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”]
數(shù)組越界
結(jié)論：動態(tài)數(shù)組需要從后向前刪除
For(int i = xx.length ; i>0 ; i--)
記錄一個聯(lián)動選擇的例子

選擇一個省以后，會有相應(yīng)的地市出現(xiàn)在另一個 select 中

City.html

復制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="cities.js"></script> 
</head> 
<body> 
<select id="province"> 
<option value=""> 請選擇 ...</option> 
<option value=" 河北省 "> 河北省 </option> 
<option value=" 遼寧省 "> 遼寧省 </option> 
<option value=" 山東省 "> 山東省 </option> 
</select> 
<select id="city"><option value="..."> 請選擇 ...</option></select> 
</body> 
</html> 

cities.js

復制代碼代碼如下:

window.onload = function(){ 
// 解析 XML 文檔 , 得到 xml 文檔的 china 根節(jié)點 
var xmlDocument = parseXml("cities.xml"); 
var chinaNode = xmlDocument.childNodes[1]; 
// 為 id="province" 的 select 節(jié)點添加 onchange 事件 , 獲取選擇的省的 value 
var provinceNode = document.getElementById("province"); 
provinceNode.onchange = function(){ 
// ** 清空 provice 節(jié)點出 <option value="..."> 請選擇 ...</option> 的所有子節(jié)點 ** 
var cityNode = document.getElementById("city"); 
// cityNodeOptionNodes 數(shù)組時活動的 , 所以需要從后向前清 
var cityNodeOptionNodes = cityNode.getElementsByTagName("option"); 
var length = cityNodeOptionNodes.length; 
for(var i = length - 1; i > 0; i--){ 
cityNode.removeChild(cityNodeOptionNodes[i]); 
} 
var provinceValue = this.value; 
// 用 provinceValue 去 xml 文檔中獲取對應(yīng)的 province 節(jié)點 
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']"); 
// 獲取 3 provinceNodeInXmlFile 的所有 city 子節(jié)點的文本值 : cityValue 
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city"); 
for (var i = 0; i < cityNodesInXmlFile.length; i++) { 
var cityNodeInXmlFile = cityNodesInXmlFile[i]; 
var cityValue = cityNodeInXmlFile.firstChild.nodeValue; 
// 利用 得到的文本值創(chuàng)建 option 節(jié)點 : <option value='cityValue'>cityValue</option> 
var optionNode = document.createElement("option"); 
optionNode.setAttribute("value", cityValue); 
var optionNodeTextNode = document.createTextNode(cityValue); 
optionNode.appendChild(optionNodeTextNode); 
// 把創(chuàng)建好的 option 節(jié)點添加到 id="city" 的 select 節(jié)點中 
cityNode.appendChild(optionNode); 
} 
}; 
// 解析 xml 文件的函數(shù) 
function parseXml(fileName){ 
//IE 內(nèi)核的瀏覽器 
if (window.ActiveXObject) { 
// 創(chuàng)建 DOM 解析器 
var doc = new ActiveXObject("Microsoft.XMLDOM"); 
doc.async = "false"; 
// 加載 XML 文檔 , 獲取 XML 文檔對象 
doc.load(fileName); 
return doc; 
} 
//Mozilla 瀏覽器 
else 
if (window.DOMParser) { 
// 創(chuàng)建 DOM 解析器 
var p = new DOMParser(); 
// 創(chuàng)建 DOM 解析器 
return p.parseFromString(fileName, "text/xml"); 
} 
else { 
return false; 
} 
} 
} 

cities.xml

復制代碼代碼如下:

<?xml version="1.0" encoding="GB2312"?> 
<china> 
<province name=" 河北省 "> 
<city> 石家莊 </city> 
<city> 邯鄲 </city> 
<city> 唐山 </city> 
<city> 張家口 </city> 
<city> 廊坊 </city> 
</province> 
<province name=" 遼寧省 "> 
<city> 沈陽 </city> 
<city> 大連 </city> 
<city> 鞍山 </city> 
<city> 撫順 </city> 
<city> 鐵嶺 </city> 
</province> 
<province name=" 山東省 "> 
<city> 濟南 </city> 
<city> 青島 </city> 
<city> 威海 </city> 
<city> 煙臺 </city> 
<city> 濰坊 </city> 
</province> 
</china> 