如何从 XML 文件中获取另一个标签内的子标签计数并使用 JavaScript 显示其元素

Question

如何从 XML 文件中获取另一个标签内的子标签数量并使用 JavaScript 显示其元素： 这是我的 XML 文件：

<?xml version="1.0" encoding="utf-8"?>
    <pdfDetails>
        <Menu menuTitle="AllTools">
            <pdf>
                <title>Integrated Architecture</title>
                <description>details</description>
                <fileName>tools_selection_wizard.pdf</fileName>
                <imageName>icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>Integrated Architecture Builder</title>
                <description>details</description>
                <fileName>integrated_architecture_builder.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>ProposalWorks</title>
                <description>details</description>
                <fileName>proposal_works.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>Cross</title>
                <description>details</description>
                <fileName>works.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>Integrated Architecture Videos</title>
                <description>details</description>
                <fileName>integrated_architecture_videos.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
        </Menu>
        <Menu menuTitle="Discover">
            <pdf>
                <title>Integrated</title>
                <description>details</description>
                <fileName>integrated_architecture.pdf</fileName>
                 <imageName>pdf_icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>Integrated Architecture Videos</title>
                <description>details</description>
                <fileName>integrated_architecture_videos.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
            <pdf>
                <title>Podcasts</title>
                <description>details</description>
                <fileName>pod_casts.pdf</fileName>
                <imageName>pdf_icon_Image.png</imageName>
            </pdf>
        </Menu>
    </pdfDetails>

在第一个菜单标签中，pdf 标签是 5，第二个是 3。如何获取计数并以表格视图格式显示元素。 这是我到目前为止所做的，但它没有获取数据

<script type="text/javascript">
    function parseXML(){
        xmlDoc=loadXMLDoc("Details.xml");

        mnu=xmlDoc.getElementsByTagName("Menu");
        var mnucount=mnu.length

        pdf=xmlDoc.getElementsByTagName("pdf");
        var pdfcount=pdf.length

        if(mnucount>=1){
            alert(mnucount);
            for(i=0;i<mnucount;i++){
                //xmlDoc.getElementsByTagName("title")[j].childNodes[0];
                '<br>'
                if(pdfcount>=1){
                    alert(pdfcount);
                    var str = '<table border="1">';
                    str+='<tr><td>title</td><td>description</td><td>fileName</td><td>imageName</td></tr>';          
                    for(j=0;j<pdfcount;j++){                
                        p=xmlDoc.getElementsByTagName("title")[j].childNodes[0];
                        txttitle=p.nodeValue;               
                        q=xmlDoc.getElementsByTagName("description")[j].childNodes[0];
                        txtdescription=q.nodeValue;             
                        r=xmlDoc.getElementsByTagName("fileName")[j].childNodes[0];
                        txtfileName=r.nodeValue;            
                        s=xmlDoc.getElementsByTagName("imageName")[j].childNodes[0];
                        txtimageName=s.nodeValue;   
                        str=str+'<tr><td>'+txttitle+'</td><td>'+txtdescription+'</td><td>'+txtfileName+'</td><td>'+txtimageName+'</td></tr>';
                    }
                    str+='</table>';
                    document.getElementById('data').innerHTML = str;
                }
            }
        }
    }


    function loadXMLDoc(dname){
        if (window.XMLHttpRequest) 
        {
            xhttp=new XMLHttpRequest();
        }
        else                        // Internet Explorer
        {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    }
</script>

这没有获取任何东西。

Answer 1

我已经修改了您的parseXML() 函数，如下所示。使用代码并检查结果。

function parseXML(){
    xmlDoc=loadXMLDoc("Details.xml");

    mnu=xmlDoc.getElementsByTagName("Menu");
    var mnucount=mnu.length;

    if(mnucount>=1){
        alert(mnucount);
        for(i=0;i<mnucount;i++){

            pdf=xmlDoc[i].getElementsByTagName("pdf");
            var pdfcount=pdf.length;

            if(pdfcount>=1){
                alert(pdfcount);
                var str = '<table border="1">';
                str+='<tr><td>title</td><td>description</td><td>fileName</td><td>imageName</td></tr>';          
                for(j=0;j<pdfcount;j++){                
                    p=pdf[j].getElementsByTagName("title")[0].childNodes[0];
                    txttitle=p.nodeValue;               
                    q=pdf[j].getElementsByTagName("description")[0].childNodes[0];
                    txtdescription=q.nodeValue;             
                    r=pdf[j].getElementsByTagName("fileName")[0].childNodes[0];
                    txtfileName=r.nodeValue;            
                    s=pdf[j].getElementsByTagName("imageName")[0].childNodes[0];
                    txtimageName=s.nodeValue;   
                    str=str+'<tr><td>'+txttitle+'</td><td>'+txtdescription+'</td><td>'+txtfileName+'</td><td>'+txtimageName+'</td></tr>';
                }
                str+='</table>';
                document.getElementById('data').innerHTML = str;
            }
        }
    }
}