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

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

1 个答案: