|
|
nodeName 文本節點的的節點名是 #text , nodeName 是只讀屬性
nodeValue 1 元素節點 2 屬性節點 3 文本節點 只讀屬性
nodeType 不能用于元素節點 返回 null
2 、 getElementsByTagName 返回一個節點集合
3 、 firstChild 、 lastChild 第一個元素節點，最后一個元素節點
4 、 childNodes 返回所有子節點列表
5 、 previousSibling 前一個兄弟節點 nextSibling 后一個兄弟節點 parentNode 返回父節點
6 、 hasChildNodes 文本節點可以作為元素節點的子節點，文本節點和屬性節點不可能再包含任何子節點
7 、 appendChild(node) 追加節點
8 、 removeChild() 移除一個節點
可以借用子節點的得到父節點，然后移除子節點。
9 、 replaceChild() 替換方法，有兩個參數，把第一個參數的內容替換掉第二個參數的內容
如果兩個都存在在 dom 中，第一個會出現在第二個的位置，而第二個將消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、創建節點
setAttribute() 為一個元素節點增加屬性
createElement() 創建一個元素節點
createTextNode() 創建一個文本節點
用這三個方法可以添加任何節點。
12 、 innerHTML 內部的 html 既可以得到，也可以設置
這里有一個例子，聯動選擇地市，地市信息在 xml 中
13 、調用函數時
1 、
node.onclick = xxx(); 得到函數的返回值，也就是執行了該函數
2 、
node.onclick = function(){
xxx();
}
得到了該函數的引用，只有觸發該事件時才執行。
14 、動態數組的刪除 ：即數組中的某個元素刪除后后面的元素會自動向前一格。
[“ 山東 ”, “ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 會是
[“ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”]
數組越界
結論：動態數組需要從后向前刪除
For(int i = xx.length ; i>0 ; i--)
記錄一個聯動選擇的例子
選擇一個省以后，會有相應的地市出現在另一個 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 根節點
var xmlDocument = parseXml("cities.xml");
var chinaNode = xmlDocument.childNodes[1];
// 為 id="province" 的 select 節點添加 onchange 事件 , 獲取選擇的省的 value
var provinceNode = document.getElementById("province");
provinceNode.onchange = function(){
// ** 清空 provice 節點出 <option value="..."> 請選擇 ...</option> 的所有子節點 **
var cityNode = document.getElementById("city");
// cityNodeOptionNodes 數組時活動的 , 所以需要從后向前清
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 文檔中獲取對應的 province 節點
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
// 獲取 3 provinceNodeInXmlFile 的所有 city 子節點的文本值 : cityValue
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
for (var i = 0; i < cityNodesInXmlFile.length; i++) {
var cityNodeInXmlFile = cityNodesInXmlFile[i];
var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
// 利用 得到的文本值創建 option 節點 : <option value='cityValue'>cityValue</option>
var optionNode = document.createElement("option");
optionNode.setAttribute("value", cityValue);
var optionNodeTextNode = document.createTextNode(cityValue);
optionNode.appendChild(optionNodeTextNode);
// 把創建好的 option 節點添加到 id="city" 的 select 節點中
cityNode.appendChild(optionNode);
}
};
// 解析 xml 文件的函數
function parseXml(fileName){
//IE 內核的瀏覽器
if (window.ActiveXObject) {
// 創建 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
// 加載 XML 文檔 , 獲取 XML 文檔對象
doc.load(fileName);
return doc;
}
//Mozilla 瀏覽器
else
if (window.DOMParser) {
// 創建 DOM 解析器
var p = new DOMParser();
// 創建 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>
JavaScript技術：javascript dom 操作詳解 js加強，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
