精确掌握相关知识的学习网址 :http://www.w3school.com.cn/xmldom/dom_nodes.asp
超经典
<script language=javascript>
var str = "<input>11112345</input>";
var doc = new xml( str );
alert(doc);
//创建一个dom对象
function xml(str){
if(window.DOMParser)//firefox内核的浏览器
{
var p = new DOMParser();
return p.parseFromString( str, "text/xml" );
}
else if( window.ActiveXObject )//ie内核的浏览器
{
var doc = new ActiveXObject( "Msxml2.DOMDocument" );
doc.loadXML(str);
return doc;
}
else
return false;
}
</script>
........................
if(!!document.all)
{
alert('当前浏览器为IE,IE兼容');
}
else
{
alert('当前浏览器为FireFox,FireFox兼容');
}
-------
一般情况下,将数据放到一个节点的属性上,这样最容易操作,
例如xml格式为:
<photo attr1="1" attr2="2"></photo>
如果得到photo节点后,可以如下操作:
node.getAttribute(''attr1'');
这样可以得到属性的值。
第二种情况,如果是放入的节点之间,比如:
<photo>这是我的照片</photo>
这样可以用node.firstChild.data来获取数据,其中photo之间的内容被看作一个文本节点,因此必须用firstChild首先得到这个节点后,然后取其data信息。
第三种情况,如果信息包含一个html或者其他xml无法直接认识的内容,可以将其放入cdata中,这样js也可以很容易处理,跟第二种情况一样:xml代码如下:
<photo><![CDATA[<a href="这是我的照片的连接">这是我的照片</a>]]></photo>
-------------
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
doc.loadXML('<?xml version="1.0"?><students><name id="test"><firstname>王</firstname></name></students>');
var newnode = doc.createNode(1,"name","");
var r = doc.createAttribute("id"); //创建属性
r.value="test2";
newnode.setAttributeNode(r); //添加属性
var newelement=doc.createElement("sex");//创建元素
var r1 = doc.createAttribute("id"); //创建属性
r1.value="test2";
newelement.setAttributeNode(r1)
newnode.appendChild(newelement)
doc.lastChild.appendChild(newnode)
alert(doc.xml)//添加一个子节点后的xml
currNode=doc.documentElement.childNodes.item(0);//
doc.documentElement.removeChild(currNode)//删除节点
alert(doc.xml)//删除后的xml
//-->
</script>
------------------
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存(需要在服务端,客户端用FSO)
//doc.save();
//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
-------------
<script language="javascript">
function window.onload()
{
var domXML=new ActiveXObject("Microsoft.xmldom");
domXML.load("Sele.xml");
var myRoot=domXML.documentElement;
var myNodes2=myRoot.childNodes;
var myNode2=myNodes2.nextNode();
var tableStr="";
for(var i=0;i<myNodes2.length;i++)
{
myNodes3=myNode2.childNodes;
myNode3=myNodes3.nextNode();
tableStr=tableStr+"<tr>";
for(var j=0;j<myNodes3.length;j++)
{
tableStr=tableStr+"<td width=100 bgcolor='#F3432A'>" + myNode3.text + "</td>";
myNode3=myNodes3.nextNode();
}
myNode=myNodes2.nextNode();
tableStr=tableStr + "</tr>";
}
tableStr="<table width=800 border=1><tr><td>CPU</td><td>内存</td><td>主板</td><td>硬盘</td></tr>" + tableStr + "</table>";
document.all.lideyongValue.innerHTML=tableStr;
}
</script>
-------------
首先,我们需要加载这个xml文件,js中加载xml文件,是通过XMLDOM来进行的.
// 加载xml文档
loadXML = function(xmlFile)
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (document.implementation&&document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}
else
{
return null;
}
return xmlDoc;
}
xml文件对象出来了, 接下去我就要对这个文档进行操作了.
比如说,我们现在需要得到节点Login/Weapon/W的第一个节点的属性,那么我们可以如下进行.
// 首先对xml对象进行判断
checkXMLDocObj = function(xmlFile)
{
var xmlDoc = loadXML(xmlFile);
if(xmlDoc==null)
{
alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
window.location.href='/Index.aspx';
}
return xmlDoc;
}
// 然后开始获取需要的Login/Weapon/W的第一个节点的属性值
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text')
而我在我的程序中的写法是这样子的,当然我在程序中的写法是已经应用到实际中的了.一并给出来,以供查看
initializeSelect = function(oid, xPath)
{
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var n;
var l;
var e = $(oid);
if(e!=null)
{
n = xmlDoc.getElementsByTagName(xPath)[0].childNodes;
l = n.length;
for(var i=0; i<l; i++)
{
var option = document.createElement('option');
option.value = n[i].getAttribute('Value');
option.innerHTML = n[i].getAttribute('Text');
e.appendChild(option);
}
}
}
上面的访问代码中,我们是通过xmlDoc.getElementsByTagName(xPath)来进行的.
还可以通过xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text')进行访问.
一些常用方法:
xmlDoc.documentElement.childNodes(0).nodeName,可以得到这个节点的名称.
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到这个节点的值. 这个值是来自于这样子的xml格式:<a>b</b>, 于是可以得到b这个值.
xmlDoc.documentElement.childNodes(0).hasChild,可以判断是否有子节点
根据我的经验,最好是使用getElementsByTagName(xPath)的方法对节点进行访问,因为这样子可以直接通过xPath来定位节点,这样子会有更好的性能.