將我的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