js遍历xml文件学习

来源：互联网发布：ubuntu kylin 优麒麟编辑：程序博客网时间：2024/05/16 01:22

最近项目中有使用到xml文件，所以提前学习了一下。下面是这几天学习使用的代码，小弟是菜鸟如果有什么错误的话希望各位大虾给予指正！！

1、获取在JS中写的xml节点

<html>
<head>
    <title>无标题页</title>
    <script type="text/javascript">
        function parseXML() {

            text = "<note>";
            text = text + "<to>George</to>";
            text = text + "<from>John</from>";
            text = text + "<heading>Reminder</heading>";
            text = text + "<body>Don't forget the meeting!</body>";
            text = text + "</note>";
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(text);
            document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
            document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
            document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

        }
    </script>

</head>
<body onload="parseXML()">
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblXml" runat="server"></asp:Label>
        <h1>W3Schools Internal Note</h1>
        <p><b>To:</b> <span id="to"></span><br />
        <b>From:</b> <span id="from"></span><br />
        <b>Message:</b> <span id="message"></span>
        </p>

</div>
</form>
</body>
</html>

效果：

W3Schools Internal Note

To: George
From: John
Message: Don't forget the meeting!

2、遍历xml文件中的节点

XMLTest.xml

<?xml version="1.0" encoding="utf-8" ?>
<CATALOG>
<CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
</CD>
<CD>
    <TITLE>One night only</TITLE>
    <ARTIST>Bee Gees</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1998</YEAR>
</CD>
<CD>
    <TITLE>Sylvias Mother</TITLE>
    <ARTIST>Dr.Hook</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS</COMPANY>
    <PRICE>8.10</PRICE>
    <YEAR>1973</YEAR>
</CD>
<CD>
    <TITLE>Black angel</TITLE>
    <ARTIST>Savage Rose</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Mega</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1995</YEAR>
</CD>
<CD>
    <TITLE>1999 Grammy Nominees</TITLE>
    <ARTIST>Many</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Grammy</COMPANY>
    <PRICE>10.20</PRICE>
    <YEAR>1999</YEAR>
</CD>
<CD>
    <TITLE>For the good times</TITLE>
    <ARTIST>Kenny Rogers</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Mucik Master</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1995</YEAR>
</CD>

</CATALOG>

jsDome1.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <script type="text/javascript">
            var xmlDoc;
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load("XMLTest.xml");
            var x = xmlDoc.documentElement.childNodes;

            for (var i = 0; i < x.length; i++) {
                if (x[i].nodeType == 1) {
                    var y = xmlDoc.documentElement.childNodes[1].childNodes; //下一级子节点
                    //var y = xmlDoc.getElementsByTagName("TITLE");
                    for (var j = 0; j < y.length; j++) {
                        if (x[j].nodeType == 1) {
                            document.write(y[j].nodeName + ":");
                            document.write(y[j].childNodes[0].nodeValue);
                            document.write("<br/>");
                        }
                    }
                    document.write("<br/>");
                    document.write("<br/>");
                }
            }
    </script>

    </div>
    </form>
</body>
</html>

效果：

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

TITLE:One night only
ARTIST:Bee Gees
COUNTRY:UK
COMPANY:Polydor
PRICE:10.90
YEAR:1998

3、在html中通过表格显示xml文件的节点

xml文件和上面使用的是同一个XMLTest.xml

jsDome2.aspx

            document.write("<tfoot>");
            document.write("<tr><th colspan='2'>This is my CD collection</th></tr>");
            document.write("</tfoot>");

            for (var i = 0; i < x.length; i++) {
                document.write("<tr>");
                document.write("<td>");
                document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
                document.write("</td>");

                document.write("<td>");
                document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
                document.write("</td>");
                document.write("</tr>");
            }
            document.write("</table>");
        }
    </script>
    </div>
    </form>
</body>
</html>

效果：