|
|
nodeName 文本節(jié)點(diǎn)的的節(jié)點(diǎn)名是 #text , nodeName 是只讀屬性
nodeValue 1 元素節(jié)點(diǎn) 2 屬性節(jié)點(diǎn) 3 文本節(jié)點(diǎn) 只讀屬性
nodeType 不能用于元素節(jié)點(diǎn) 返回 null
2 、 getElementsByTagName 返回一個(gè)節(jié)點(diǎn)集合
3 、 firstChild 、 lastChild 第一個(gè)元素節(jié)點(diǎn)，最后一個(gè)元素節(jié)點(diǎn)
4 、 childNodes 返回所有子節(jié)點(diǎn)列表
5 、 previousSibling 前一個(gè)兄弟節(jié)點(diǎn) nextSibling 后一個(gè)兄弟節(jié)點(diǎn) parentNode 返回父節(jié)點(diǎn)
6 、 hasChildNodes 文本節(jié)點(diǎn)可以作為元素節(jié)點(diǎn)的子節(jié)點(diǎn)，文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能再包含任何子節(jié)點(diǎn)
7 、 appendChild(node) 追加節(jié)點(diǎn)
8 、 removeChild() 移除一個(gè)節(jié)點(diǎn)
可以借用子節(jié)點(diǎn)的得到父節(jié)點(diǎn)，然后移除子節(jié)點(diǎn)。
9 、 replaceChild() 替換方法，有兩個(gè)參數(shù)，把第一個(gè)參數(shù)的內(nèi)容替換掉第二個(gè)參數(shù)的內(nèi)容
如果兩個(gè)都存在在 dom 中，第一個(gè)會(huì)出現(xiàn)在第二個(gè)的位置，而第二個(gè)將消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、創(chuàng)建節(jié)點(diǎn)
setAttribute() 為一個(gè)元素節(jié)點(diǎn)增加屬性
createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
用這三個(gè)方法可以添加任何節(jié)點(diǎn)。
12 、 innerHTML 內(nèi)部的 html 既可以得到，也可以設(shè)置
這里有一個(gè)例子，聯(lián)動(dòng)選擇地市，地市信息在 xml 中
13 、調(diào)用函數(shù)時(shí)
1 、
node.onclick = xxx(); 得到函數(shù)的返回值，也就是執(zhí)行了該函數(shù)
2 、
node.onclick = function(){
xxx();
}
得到了該函數(shù)的引用，只有觸發(fā)該事件時(shí)才執(zhí)行。
14 、動(dòng)態(tài)數(shù)組的刪除 ：即數(shù)組中的某個(gè)元素刪除后后面的元素會(huì)自動(dòng)向前一格。
[“ 山東 ”, “ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 會(huì)是
[“ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”]
數(shù)組越界
結(jié)論：動(dòng)態(tài)數(shù)組需要從后向前刪除
For(int i = xx.length ; i>0 ; i--)
記錄一個(gè)聯(lián)動(dòng)選擇的例子
選擇一個(gè)省以后，會(huì)有相應(yīng)的地市出現(xiàn)在另一個(gè) select 中
City.html
復(fù)制代碼 代碼如下:
<!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=""> 請(qǐng)選擇 ...</option>
<option value=" 河北省 "> 河北省 </option>
<option value=" 遼寧省 "> 遼寧省 </option>
<option value=" 山東省 "> 山東省 </option>
</select>
<select id="city"><option value="..."> 請(qǐng)選擇 ...</option></select>
</body>
</html>
cities.js
復(fù)制代碼 代碼如下:
window.onload = function(){
// 解析 XML 文檔 , 得到 xml 文檔的 china 根節(jié)點(diǎn)
var xmlDocument = parseXml("cities.xml");
var chinaNode = xmlDocument.childNodes[1];
// 為 id="province" 的 select 節(jié)點(diǎn)添加 onchange 事件 , 獲取選擇的省的 value
var provinceNode = document.getElementById("province");
provinceNode.onchange = function(){
// ** 清空 provice 節(jié)點(diǎn)出 <option value="..."> 請(qǐng)選擇 ...</option> 的所有子節(jié)點(diǎn) **
var cityNode = document.getElementById("city");
// cityNodeOptionNodes 數(shù)組時(shí)活動(dòng)的 , 所以需要從后向前清
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 文檔中獲取對(duì)應(yīng)的 province 節(jié)點(diǎn)
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
// 獲取 3 provinceNodeInXmlFile 的所有 city 子節(jié)點(diǎn)的文本值 : 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é)點(diǎn) : <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é)點(diǎn)添加到 id="city" 的 select 節(jié)點(diǎn)中
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 文檔對(duì)象
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
復(fù)制代碼 代碼如下:
<?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> 濟(jì)南 </city>
<city> 青島 </city>
<city> 威海 </city>
<city> 煙臺(tái) </city>
<city> 濰坊 </city>
</province>
</china>
JavaScript技術(shù)：javascript dom 操作詳解 js加強(qiáng)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
