所以这是我的html和xml，我要执行的操作是导入stationID，距离，地址，h24的值以及所有燃料属性，当有人按下按钮时，我希望该人查看xml文件的确切元素和属性。问题在于，不仅有些显示为未定义和为空（如您在pic中看到的那样），而且有些元素（例如具有两个电话的phone）无法显示这两个。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE dataset
[
<!ELEMENT dataset (station*)>
<!ATTLIST dataset lat CDATA #REQUIRED
long CDATA #REQUIRED
msg CDATA #REQUIRED
>
<!ELEMENT station (country, municipality, dd, address, companyName,
lat, long, h24, brand, phone*, fuels)>
<!ATTLIST station stationID CDATA #REQUIRED
distance CDATA #REQUIRED
>
<!ELEMENT country (#PCDATA)>
<!ATTLIST country countryID CDATA #IMPLIED>
<!ELEMENT municipality (#PCDATA)>
<!ATTLIST municipality municipalityID CDATA #IMPLIED>
<!ELEMENT dd (#PCDATA)>
<!ATTLIST dd ddID CDATA #IMPLIED>
<!ELEMENT address (#PCDATA)>
<!ELEMENT companyName (#PCDATA)>
<!ELEMENT lat (#PCDATA)>
<!ELEMENT long (#PCDATA)>
<!ELEMENT h24 (#PCDATA)>
<!ATTLIST h24 value CDATA #REQUIRED>
<!ELEMENT brand (#PCDATA|EKO|Shell|JETOIL)*>
<!ATTLIST brand brandID CDATA #REQUIRED>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT fuels (fuel*)>
<!ATTLIST fuels fuelTypeID CDATA #IMPLIED
price CDATA #IMPLIED
priceTimeStamp CDATA #IMPLIED
>
]>
<dataset lat="23.123233" long="40.12333" msg="Hello user!">
<station stationID="11111" distance="1.4">
<country countryID="49000200">Λάρισας</country>
<municipality municipalityID="12345">Φαρσάλων</municipality>
<dd ddID="12345">Κοινότητα Σταυρού</dd>
<address><![CDATA[Σόλωνος 35, Σταυρός]]></address>
<companyName><![CDATA[Τζίμης Oil]]></companyName>
<lat>23.111456</lat>
<long>41.1114567</long>
<h24 value="0"/>
<brand brandID="1">EKO</brand>
<phone>2410555666</phone>
<phone>6932555444</phone>
<fuels>
<fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-10-22 07:30:17">Super Duper Αμόλυβδη</fuel>
<fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-10-22 07:30:45">WOW Diesel</fuel>
</fuels>
</station>
<station stationID="22222" distance="2.4">
<country countryID="49000200">Λάρισας</country>
<municipality municipalityID="223344">Φαρσάλων</municipality>
<dd ddID="222222">Τερψιθέα</dd>
<address><![CDATA[Λαρίσης 22, Τερψιθέα]]></address>
<companyName><![CDATA[ΤερψιOIL]]></companyName>
<lat>23.223456</lat>
<long>41.2234567</long>
<h24 value="0"/>
<brand brandID="2">/Shell</brand>
<phone>2410555666</phone>
<fuels>
<fuel fuelTypeID="1" price="1.622" priceTimeStamp="2018-11-02 08:30:17">Super Duper Αμόλυβδη</fuel>
<fuel fuelTypeID="2" price="1.042" priceTimeStamp="2018-11-02 08:30:45">WOW Diesel</fuel>
</fuels>
</station>
<station stationID="33333" distance="3.4">
<country countryID="32000200">Μαγνησίας</country>
<municipality municipalityID="332211">Βελεστίνου</municipality>
<dd ddID="34567">Βελεστίνο</dd>
<address><![CDATA[Κενταύρου 35, Βελεστίνο]]></address>
<companyName><![CDATA[Κένταυρος Oil]]></companyName>
<lat>23.333333</lat>
<long>41.333333</long>
<h24 value="1"/>
<brand brandID="3">JETOIL</brand>
<phone>6932555444</phone>
<fuels>
<fuel fuelTypeID="1" price="1.543" priceTimeStamp="2018-11-10 07:30:17">Super Duper Αμόλυβδη</fuel>
<fuel fuelTypeID="2" price="1.043" priceTimeStamp="2018-11-10 07:30:45">WOW Diesel</fuel>
</fuels>
</station>
</dataset>
<!DOCTYPE html>
<html style="height: 100%; width: 100%;">
<style>
th{
border:1px solid black;
}
td{
border:1px solid black;
}
table{
border:1px solid black;
}
</style>
<body style="height: 100%; width: 100%;">
<div id="div1" style="display:inline-block; width:150px; height:auto; float:left; border-style:groove;">
XML file
<button type="button" onclick="loadXml()">Load...</button>
JSON file
<button type="button">Load...</button>
Clear Page
<button type="button" name="load_clear" id="clear">Clear</button>
</div>
<div id="div2" style= "display:inline-block; width:90%; height:100%; border-style:groove;">
<table id="demo"></table>
</div>
<script type="text/javascript">
function loadXml() {
var openxml = new XMLHttpRequest();
openxml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
openxml.open("GET", "fuel.xml", false);
openxml.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th></tr>";
var x = xmlDoc.getElementsByTagName("station","h24");
for (i = 0; i < 3; i++){
table += "<tr><td>" +
x[i].getAttribute("stationID")+
"</td><td>" +
x[i].getAttribute("distance")+
"</td><td>" +
x[i].getElementsByTagName("address")[0].firstChild.data+
"</td><td>" +
x[i].getAttribute["value"]+
"</td><td>"+
x[i].getElementsByTagName("phone")[0].firstChild.data+
"</td><td>" +
x[i].getElementsByTagName("fuel")[0].getAttribute("fuelTypeId")+
"</td><td>"+
x[i].getElementsByTagName("fuel")[0].getAttribute("price")+
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
答案 0 :(得分：0)
如果您仔细看一下xml，则需要注意以下几点：
h24不是<station>节点的属性，而是子value节点的<h24>，因此您得到undefined < / li>
.getAttribute("fuelTypeId")应该有大写的D：.getAttribute("fuelTypeID") <phone>和<fuel>节点，您首先需要决定如何显示其数据：如果您只想将这些值连接到一个逗号分隔的字符串中，或者有多个单元格，等等。 UPD：：如果要用属性值或节点文本组成的逗号分隔字符串，则首先需要获取节点数组。请注意，您如何通过在节点集合中指定其索引-.getElementsByTagName("fuel")[0]来访问特定节点（例如[0]）。要使用此类集合制作数组，您需要执行类似Array.from(x[i].getElementsByTagName("fuel"))的操作（也请阅读Most efficient way to convert an HTMLCollection to an Array）。有了数组后，您就可以使用Array.prototype.map()之类的方法将其转换为字符串数组（无论是属性值还是文本）。然后，您可以使用Array.prototype.join()将数组中的字符串连接成单个逗号分隔的字符串。您确实需要阅读诸如使用JavaScript中的HTMLCollections和Arrays之类的内容。除非您希望别人为您解决整个问题，否则别无选择。 MDN是一个好的开始，它有很多示例。