如何使用javascript从xml文件中获取子节点值_Javascript_Xml

如何使用javascript从xml文件中获取子节点值

javascript xml

如何使用javascript从xml文件中获取子节点值,javascript,xml,Javascript,Xml,我可以从下面的XML中获取标记值，但无法获取所有值： <?xml version='1.0' encoding='ISO-8859-1'?> <gallery> <name>abc</name> <email><![CDATA[smith@email.com]]></email> <images> <image> <url><![CDAT

我可以从下面的XML中获取

标记值，但无法获取所有

值：

<?xml version='1.0' encoding='ISO-8859-1'?>
<gallery>
  <name>abc</name>
  <email><![CDATA[smith@email.com]]></email>

  <images>
    <image>
      <url><![CDATA[g2pic3.jpg]]></url>
      <caption><![CDATA[Red Sun]]></caption>
    </image>
    <image>
      <url><![CDATA[g2pic4.jpg]]></url>
      <caption><![CDATA[Eiffel Tower]]></caption>
    </image>
  </images>

</gallery>

abc

这是我的javascript代码。我想获取中包含的所有值

标签，但我在使用此部件时遇到问题

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        myFunction(xhttp);
    }
}
xhttp.open("GET", "template.xml", true);
xhttp.send();

function myFunction(xml) {
     var xmlDoc = xml.responseXML;
     nameList = xmlDoc.getElementsByTagName("name");

     var nameList = nameList[0].childNodes;

     document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;

}


//xmlDoc.getElementsByTagName("gallery").item(0).firstChild.nodeValue;

</script>

</body>
</html>



var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
myFunction（xhttp）；
}
}
open（“GET”，“template.xml”，true）；
xhttp.send（）；
函数myFunction（xml）{
var xmlDoc=xml.responseXML；
nameList=xmlDoc.getElementsByTagName（“名称”）；
var nameList=nameList[0]。子节点；
document.getElementById（“demo”）.innerHTML=xmlDoc.getElementsByTagName（“名称”）[0]。childNodes[0]。nodeValue；
}
//xmlDoc.getElementsByTagName（“gallery”）.item（0）.firstChild.nodeValue；

很肯定有更好的解决方案。我那朴素的旧js有点生锈了

<!DOCTYPE html>
<html>
    <body>
        <p id="demo"></p>

        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                    myFunction(xhttp);
                }
            }
            xhttp.open("GET", "template.xml", true);
            xhttp.send();

            function myFunction(xml) {
                var xmlDoc = xml.responseXML;

                // Create a object gallery to store the values.
                var gallery = {};
                gallery.name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
                gallery.email = xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;

                // Put all image elements into xmlImages
                var xmlImages = xmlDoc.getElementsByTagName("image");

                // Add an empty array to gallery
                gallery.image = [];

                // Iterate over all images in xmlImages
                for(var i = 0; i < xmlImages.length; i++) {

                    var xmlImage = xmlImages[i];

                    // Create an new object and add url and caption values to it                                    
                    var image = {};
                    image.url = xmlImage.getElementsByTagName("url")[0].childNodes[0].nodeValue;
                    image.caption = xmlImage.getElementsByTagName("caption")[0].childNodes[0].nodeValue;

                    // Add the image object to the gallery.image array
                    gallery.image.push(image);
                }

                // Quick and dirty, create a string with html tag to present the result
                var html = "name: " + gallery.name + "<br>" +
                       "email: " + gallery.email + "<br>" + 
                       "images:<br><ul>";

                for(var i = 0; i < gallery.image.length; i++) {
                    html += "<li>image" + i + ":<br>";
                    html += "<ul><li>url: " + gallery.image[i].url + "</li>";
                    html += "<li>caption: " + gallery.image[i].caption + "</li></ul>";
                }
                html += "</ul>";
                document.getElementById("demo").innerHTML = html;
            }
        </script>

    </body>
</html>



var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
myFunction（xhttp）；
}
}
open（“GET”，“template.xml”，true）；
xhttp.send（）；
函数myFunction（xml）{
var xmlDoc=xml.responseXML；
//创建对象库以存储值。
var gallery={}；
gallery.name=xmlDoc.getElementsByTagName（“名称”）[0]。子节点[0]。节点值；
gallery.email=xmlDoc.getElementsByTagName（“电子邮件”）[0]。子节点[0]。节点值；
//将所有图像元素放入xmlImages
var xmlmages=xmlDoc.getElementsByTagName（“图像”）；
//将空数组添加到库中
gallery.image=[]；
//迭代xmlImages中的所有图像
对于（var i=0；i”+
“电子邮件：“+gallery.email+”
“+
“图像：
”；
对于（变量i=0；i图像”+i+：
”；
html+=“url:“+gallery.image[i].url+””；
html+=“标题：“+gallery.image[i].标题+””；
}
html+=“”；
document.getElementById（“demo”）.innerHTML=html；
}

我很高兴能帮上忙