javascript之XML DOM的解析
1、xml文件的定義javascript
Xml代碼 
html
<span style='font-family: "times new roman", times;'><?xml version="1.0" encoding="gbk"?> java
<china> node
<province name="吉林省"> 瀏覽器
<city>長春</city> app
<city>吉林市</city> 異步
<city>四平</city> async
<city>松原</city> ui
<city>通化</city> this
</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> </span>
<?xml version="1.0" encoding="gbk"?> <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>
2、xml文件解析器的util類（跨瀏覽器）
Js代碼
<span style='font-family: "times new roman", times;'>function parseXML(fileXmlName){
var xmlDoc;
try {
//Internet Explorer 建立一個空的xml文檔
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
//Firefox, Mozilla, Opera, 建立一個空的xml文檔
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//關閉異步加載
xmlDoc.async = false;
//加載xml文件
xmlDoc.load(fileXmlName);
return xmlDoc;
}
</span>
function parseXML(fileXmlName){ var xmlDoc; try { //Internet Explorer 建立一個空的xml文檔 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try { //Firefox, Mozilla, Opera, 建立一個空的xml文檔 xmlDoc = document.implementation.createDocument("", "", null); } catch (e) { } } //關閉異步加載 xmlDoc.async = false; //加載xml文件 xmlDoc.load(fileXmlName); return xmlDoc; }
3、XML DOM訪問節點
Js代碼
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="util.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">請選擇....</option>
<option value="吉林省">吉林省</option>
<option value="遼寧省">遼寧省</option>
<option value="山東省">山東省</option>
</select>
<select id="city" name="city">
<option value="">請選擇.....</option>
</select>
</body>
<script language="JavaScript">
//獲取第一個下拉選擇框時，顯示對應的省份信息
document.getElementById("province").onchange = function () {
//處理上一級節點的值
var cityElement = document.getElementById("city");
var optionElements =cityElement.getElementsByTagName("option");
for(var z=1;z<optionElements.length;z++){
cityElement.removeChild(optionElements[z]);
z--;
}
//1.獲取頁面選中的省份信息
var provinceElement = this.value;
//2.建立xml解析器,參數傳遞xml文件
var docXml = parseXML("cities.xml");
//3.獲取xml文件全部對應的province標籤
var provinceXmlElements = docXml.getElementsByTagName("province");
//4.遍歷province標籤
for (var i = 0; i < provinceXmlElements.length; i++) {
var provinceXmlElement = provinceXmlElements[i];
var provinceXmlValue = provinceXmlElement.getAttribute("name");
//5.對比(頁面==xml)
if (provinceXmlValue == provinceElement) {
//6.獲取獲取xml文件全部對應的province下的全部city標籤
var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
//7.遍歷city標籤
for (var j = 0; j < cityXmlElements.length; j++) {
var cityXmlElement = cityXmlElements[j];
// var cityXmlValue = cityXmlElement.fistChild.nodeValue;
var cityXmlValue = cityXmlElement.text;
//8.增長city值
var optionElement = document.createElement("option");
optionElement.setAttribute("value", cityXmlValue);
var text = document.createTextNode(cityXmlValue);
optionElement.appendChild(text);
cityElement.appendChild(optionElement);
}
}
}
}
</script>
</html>
- 1. XML解析之Dom解析
- 2. XML之DOM解析詳解
- 3. xml解析之DOM方式
- 4. Android--解析XML之DOM
- 5. Android 解析xml 之DOM
- 6. XML DOM解析
- 7. xml解析（DOM）
- 8. Dom解析xml
- 9. dom解析xml
- 10. DOM解析XML
- 更多相關文章...
- • XML DOM 解析器 - XML DOM 教程
- • XML DOM 解析器錯誤 - XML DOM 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. XML解析之Dom解析
- 2. XML之DOM解析詳解
- 3. xml解析之DOM方式
- 4. Android--解析XML之DOM
- 5. Android 解析xml 之DOM
- 6. XML DOM解析
- 7. xml解析（DOM）
- 8. Dom解析xml
- 9. dom解析xml
- 10. DOM解析XML