使用 Javascript 进行 XML 解析

Question

我有一个包含多条记录的 XML 文件，我想在一个页面上显示所有这些记录。我已经写了一些代码，但它并没有帮助我。 这里有些标签是可选的，所以我如何在没有出现的可选标签中显示“--”？

XML 文件

<doctors>
    <doctor specialization="Gynaecologist">
        <name>Alex Mashkin</name>
        <bachelor_degree>MBBS</bachelor_degree>
        <master_degree>Master in Gynaecology</master_degree>
        <experience>7 Years</experience>
        <available_timings>12PM to 5PM</available_timings>
        <fees>500</fees>
        <operation_charges>20000</operation_charges>
        <special_visit_charges>1000</special_visit_charges>
    </doctor>
    <doctor specialization="Sergeon">
        <name>Dazy Deepy</name>
        <bachelor_degree>MBBS</bachelor_degree>
        <master_degree>Master in Surgery</master_degree>
        <experience>10 Years</experience>
        <available_timings>11AM to 2PM</available_timings>
        <fees>900</fees>
        <operation_charges>25000</operation_charges>
        <special_visit_charges>1800</special_visit_charges>
    </doctor>
    <doctor specialization="Dentist">
        <name>Mona Bralia</name>
        <bachelor_degree>BDS</bachelor_degree>
        <experience>3 Years</experience>
        <available_timings>4PM to 8PM</available_timings>
        <fees>300</fees>
        <special_visit_charges> 600</special_visit_charges>
    </doctor> </doctors>

HTML 代码

(sn-p)

<script type="text/javascript">
    if (window.XMLHttpRequest) {
        //Code for IE7,Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        //code for IE6,IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "XMLFile.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;

    document.write("<table border='1'>");
    var x=xmlDoc.getElementsByTagName("doctor");
    for (i=0;i<x.length;i++)
      { 
      document.write("<tr><td>");
      document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getAttribute("specialization"));
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("bachelor_degree")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("master_degree")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("experience")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("available_timings")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("fees")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("operation_charges")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("special_visit_charges")[0].childNodes[0].nodeValue);
      document.write("</td></tr>");
      }
    document.write("</table>");

</script>

Answer 1

因此，您想要迭代所有 <doctor> 元素，并检查每个元素的子元素。这意味着您不能只从文档中获取所有xmlDoc.getElementsByTagName("master_degree") 并认为它的ith 项将匹配当前医生，因为有些医生没有<master_degree> 元素。相反，通过在医生本身上应用getElementsByTagName 来检查每个人，并计算您选择了多少个硕士学位（可能没有，可能不止一个？）。

// a mapping from HTML ids to XML tag names, to make it more programmatical
var map = {dname:"name", bdegree":"bachelor_degree", mdegree:"master_degree", exp:"experience", availibity:"available_timings, fee:"fees", opcharge:"operation_charges", spcharge:"special_visit_charges"};
// and from HTML ids to XML attribute names of the doctor
var attrmap = {spec:"specialisation"};

… // load XML etc - you should do it asynchronous, btw
var doctors = xmlDoc.getElementsByTagName("doctor"),
    doctorCount = doctors.length;
for (var i=0; i<doctorCount; i++) {
    var doc = doctors[i];
    for (var id in map) {
        var elements = doc.getElementsByTagName(map[id]),
            var result = "";
        if (!elements.length)
            result = "---";
        for (var j=0; j<elements.length; j++)
            if (elements[i].firstChild)
                result += elements[i].firstChild.data;
        document.getElementById(id).innerText += result;
    }
    for (var id in attrmap) {
        document.getElementById(id).innerText += doc.getAttribute(attrmap[id]);
    }
}

Answer 2

经过大量研究，我找到了用属性迭代所有元素的最短方法。 代码如下：

<script type="text/javascript">
if (window.XMLHttpRequest)
{
    //Code for IE7,Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{
    //code for IE6,IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "XMLFile.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
y=xmlDoc.documentElement.childNodes;
for (i=0;i<y.length;i++)
{
    if (y[i].nodeType!=3)
    {
        //This code for printing attribute of a tag(you have to give attribute name).
        document.write("<br>" + y[i].getAttributeNode('specialization').nodeName + ":  ");
        document.write(y[i].getAttributeNode('specialization').nodeValue + "<br>");
        for (z=0;z<y[i].childNodes.length;z++)
        {
            if (y[i].childNodes[z].nodeType!=3)
            {
                            //This is for Node Name.
                document.write(y[i].childNodes[z].nodeName + ": ");
                            //This is for Node Value.
                document.write(y[i].childNodes[z].textContent + "<br>");
            }
        }
    }
}
</script>