[HTML]js读取XML文件并解析

原创于 2022-01-07 15:23:49 发布 · 675 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xml #javascript #html

HTML 专栏收录该内容

1 篇文章

订阅专栏

这个示例展示了如何使用JavaScript在HTML页面中加载和解析XML文件。通过XMLDOM对象，从test.xml文件读取数据，并将'To', 'From'和'Message'的内容分别填充到页面相应位置。这是一个基本的客户端XML数据处理方法。

xml文件：test.xml

<?xml version="1.0"?>  
  
<note>  
<to>George</to>  
<from>John</from>  
<heading>Reminder</heading>  
<body>Don't forget the meeting!</body>  
<lastname>Simth</lastname>  
  
</note>

html文件：

<html>  
  
<head>  
  
    <script type="text/javascript">  
      
        function parseXML(){  
              
            try{  
                  
                xmlDoc= new ActiveXObject("Microsoft.XMLDOM");  
            }catch(e){  
                  
                try{  
                      
                    xmlDoc= document.implementation.createDocument("","",null);  
                }catch(e){  
                      
                    alert(e.message);  
                    return;  
                }  
            }  
            xmlDoc.async = false;  
            xmlDoc.load("../xml/test.xml");  
              
            document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;  
            document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;  
            document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;  
        }  
    </script>  
</head>  
<body onload="parseXML()">  
  
    <h1>W3School.com.cn Internal Note</h1>  
    <p><b>To:</b><span id="to"></span><br/>  
    <b>From:</b><span id="from"></span><br/>  
    <b>Message:</b><span id="message"></span>  
    <p>  
      
      
</body>  
  
</html>