javascript读取xml文件

JavaScript · 2022年6月27日 · 168 次浏览

使用JavaScript读取XML文件

  • XML文件自行创建，文档树结构如下：根节点下三个子节点，每个子节点下5个子节点，随便选取第三层一组节点，读取其中信息，节点命名、及文本信息自行设定。
  • 直观图
    javascript读取xml文件

相关代码

  • index.html

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通过JavaScript读取XML文档中的数据</title>
</head>
<script>
function get_xml(){
	var xmldoc,employesNode,employeNode,peopleNode;		//定义变量
	var nameNode,titleNode,numberNode,displayText;		//定义变量


 	xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 	//创建Microsoft解析器实例

 	xmldoc.async = false;

 	xmldoc.load("index.xml");  							//载入指定的XML文档

	employesNode=xmldoc.documentElement;				//获取根节点

	dlat=employesNode.firstChild;				//访问根元素下的第一个节点


	var d2=dlat.nextSibling;

	var d3=d2.nextSibling;

	var d4=d3.nextSibling;




	numberNode=d4.firstChild;					//获取number元素

	nameNode=numberNode.nextSibling;					//获取name元素

	objectNode=nameNode.nextSibling;

	telNode=objectNode.nextSibling;

	adressNode=telNode.nextSibling;

	var emailNode=adressNode.nextSibling
	//实现字符串的拼接,输出XML文档中的数据
	displayText="员工信息:"+numberNode.firstChild.nodeValue+','+nameNode.firstChild.nodeValue+','+objectNode.firstChild.nodeValue+','+telNode.firstChild.nodeValue+adressNode.firstChild.nodeValue +emailNode.firstChild.nodeValue;


	div.innerHTML=displayText;   	//指定在ID标识为div的
    标签中输出字符串displayText的信息
}
</script>




<body>


<h1>获取XML文档中的数据</h1>


<input type="button" value="获取XML中的指定数据" onClick="get_xml()">


<div id="div">111111</div>




</body>
</html>

  • index.xml

    
<employes>
        <employe id='1'>
                <number>1001</number>
                <name>李**</name>
                <object>PHP</object>
                <tel>84978981</tel>
                <address>长春市</address>
                <e_mail>li**@sina.com</e_mail>
        </employe>


        <employe id='2'>
                <number>1002</number>
                <name>高**</name>
                <object>VB</object>
                <tel>84978981</tel>
                <address>长春市</address>
                <e_mail>gao**@sina.com</e_mail>
        </employe>


        <employe id='3'>
                <number>1003</number>
                <name>李**</name>
                <object>JSP</object>
                <tel>84978981</tel>
                <address>长春市</address>
                <e_mail>li**@mr.com</e_mail>
        </employe>

        <employe id='4'>
                <number>1004</number>
                <name>李**</name>
                <object>JSP</object>
                <tel>84978981</tel>
                <address>长春市</address>
                <e_mail>li**@mr.com</e_mail>
        </employe>


        <employe id='5'>
                <number>1005</number>
                <name>李aaaaaaaaa</name>
                <object>JSPbbbbbbbb</object>
                <tel>849789813423421</tel>
                <address>长春市dsfsdaf</address>
                <e_mail>li**@mr.com</e_mail>
        </employe>

</employes>

  • 建立一个 _notes 文件夹，里面放 dwsync.xml 文件

  • dwsync.xml

    
<dwsync>
<file name="index.xml" local="128478637080000000" remote="0" testing="128478633780000000" />
<file name="index.html" local="128492594580000000" remote="0" testing="128492592420000000" />
</dwsync>

提示：用IE浏览器打开文件

  • 读取前

    javascript读取xml文件

  • 读取后

    javascript读取xml文件


    如果觉得本文写得不错顺手点个赞感谢老铁！