将我的XML文件链接到我的HTML页面

Question

我需要一些关于JavaScript的帮助，我创建了一个XML文件，我希望它可以显示在我创建的HTML页面中。我希望将它显示在浏览器在一个DIV元素中通过以下方式使用JavaScript的帮助：

---

items 
    | 
    |__fruits 
    | |_____orange 
    | |_____Banana 
    | |_____Mango 
    | 
    |__drinks 

---

<?xml version="1.0" encoding="utf-8"?> 
<items image="images/items.JPG"> 
    <fruits image="images/fruits.JPG"> 
    <orange image="images/orange.JPG" qty="15" rate="Rs 40/kg"/> 
    <banana image="images/banana.JPG" qty="25" rate="Rs 20/kg"/> 
    <mango image="images/mango.JPG" qty="19" rate="Rs 45/kg"/> 
    </fruits> 
    <drinks image="images/drinks.jpg"> 
    <pepsi image="images/pepsi.jpg" qty="10" rate="Rs 22/litre"/> 
    <coke image="images/coke.jpg" qty="8" rate="Rs 21/litre"/> 
    <wines image="images/wines.JPG"> 
     <grapes image="images/grapes.JPG" qty="4" rate="Rs 60/litre"/> 
     <apple image="images/apple.JPG" qty="2" rate="Rs 80/litre"/> 
    </wines> 
    <harddrinks image="images/harddrinks.JPG"> 
     <whisky image="images/whisky.JPG" qty="3" rate="Rs 100/litre"/> 
     <beer image="images/beer.JPG" qty="3" rate="Rs 30/litre"/> 
    </harddrinks> 
    </drinks> 
</items> 

Answer 1

你必须通过以满足您的特定需求的XML文件来分析，但也许开始通过在xml文件中加载：

var xmlDoc; 
<!-- 
if (window.XMLHttpRequest) 
    { 
    xhttp=new XMLHttpRequest(); 
    } 
else // Internet Explorer 5/6 
    { 
    xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xhttp.open("GET","PathToYourXMLFilename.xml",false); 
xhttp.send(""); 
xmlDoc=xhttp.responseXML; 

然后，每个节点元件放置到数组（或几个）：

var myFruits=xmlDoc.getElementsByTagName("fruits"); 

我可以得到更简单的方法通过所有的节点来浏览

var xmlDoc = loadXMLDoc('data.xml'); 
var myItems = xmlDoc.getElementsByTagName("items"); 
var outputDiv = document.getElementById("dvList1"); 

var divOutput = document.createElement("div"); 
var divstr = document.createTextNode(xmlDoc.documentElement.nodeName); 
divOutput.appendChild(divstr); 
outputDiv.appendChild(divOutput); 

x=xmlDoc.documentElement.childNodes; 
for (i=0;i<x.length;i++) 
{ 
if (x[i].nodeType==1) 
    {//Process only element nodes (type 1) 
    var divOutput = document.createElement("div"); 
    var divstr = document.createTextNode(x[i].nodeName); 
    divOutput.appendChild(divstr); 
    outputDiv.appendChild(divOutput); 
    } 
} 

---

我想要得到如下输出：

items 
    | 
    |__fruits 
    | |_____orange 
    | |_____Banana 
    | |_____Mango 
    | 
    |__drinks