在 JS 中解析 XML 文件

Parsing XML File in JS

本文关键字：XML 文件 JS      更新时间：2023-09-26

我正在尝试解析JS中的XML文件，下面的XML包含父和子元素，如下所示

我的XML文件： 

<?xml version="1.0" ?>
<root>
<program name="Vishal">
    <computation type="student">
        <module type="a1">              
            <modPath>aaa</modPath>
            <modInputTemplate>aaaaaaaa</modInputTemplate>
            <modSchematic>aaaa</modSchematic>
        </module>
        <module type="a2">              
            <modPath>xxxx</modPath>
            <modInputTemplate>tttttt</modInputTemplate>
            <modSchematic>yyyy</modSchematic>
        </module>
        <module type="a3">
            <modPath>bbbbbbbbbb</modPath>
            <modInputTemplate>bbbbbbbbbb</modInputTemplate>
            <modSchematic>bbbbbbbb</modSchematic>
        </module>
        <module type="a4">
            <modPath>cccc</modPath>
            <modInputTemplate>cccccc</modInputTemplate>
            <modSchematic>ccccccc</modSchematic>
        </module>
        <module type="a5">
            <modPath>ddddddd</modPath>
            <modInputTemplate>ddddddddddddd</modInputTemplate>
            <modSchematic>dddddddddd</modSchematic>
        </module>
        <module type="a6">
            <modPath>eeee</modPath>
            <modInputTemplate>eee</modInputTemplate>
            <modSchematic>eee</modSchematic>
        </module>
        <module type="a7">
            <modPath>ffff</modPath>
            <modInputTemplate>ffff</modInputTemplate>
            <modSchematic>fffff</modSchematic>
        </module>
        <module type="a8">
            <modPath>ggggggg</modPath>
            <modInputTemplate>ggggggg</modInputTemplate>
            <modSchematic>ggggggg</modSchematic>
        </module>
    </computation>
    <computation type="Employee">
        <module type="b1">              
            <modPath>lllll</modPath>
            <modInputTemplate>llllll</modInputTemplate>
            <modSchematic>lllll</modSchematic>
        </module>
        <module type="b2">              
            <modPath>mmmmmmmmm</modPath>
            <modInputTemplate>mmmmmmmm</modInputTemplate>
            <modSchematic>mmmmmm</modSchematic>
        </module>
        <module type="b3">
            <modPath>nnnn</modPath>
            <modInputTemplate>nnnnnn</modInputTemplate>
            <modSchematic>nnnn</modSchematic>
        </module>
        <module type="b4">
            <modPath>oooooo</modPath>
            <modInputTemplate>ooooooo</modInputTemplate>
            <modSchematic>oooooooooooo</modSchematic>
        </module>
        <module type="b5">
            <modPath>pppppppppp</modPath>
            <modInputTemplate>ppppppppppp</modInputTemplate>
            <modSchematic>ppppppppppp</modSchematic>
        </module>
        <module type="b6">
            <modPath>qqqqqqqqq</modPath>
            <modInputTemplate>qqqqqqqqqq</modInputTemplate>
            <modSchematic>qqqqqqqqqqq</modSchematic>
        </module>           
    </computation>      
</program>
<program name="Rakesh">
.......
.......
.......
</program>
<program name="Praveen">
.......
.......
.......
</program>
</root>

JavaScript 文件

<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.onreadystatechange = readXML;
        xmlDoc.load("writers.xml");
    }
    function readXML()
    {
        if(xmlDoc.readyState == 4){
            myFunction(xmlDoc);
        }
        function myFunction(xml) {
            var x, i, txt;
            txt = "";
            var x = xmlDoc.getElementsByTagName("module");
            for( i = 0; i < x[0].childNodes.length; i++) {
                txt += x[0].childNodes[i].nodeName + ": " + x[0].childNodes[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("demo").innerHTML = txt;
        }
    }
</script>
</head>
<body onload="loadxml()">
    <p id="demo">Write output of loadxml()</p>
</body>
</html>

输出我得到的只是 a1 连续：

aaa
aaaaaaaa
aaaa

我想要所有的孩子（a1至a8）

要求：

1）如果我传递一个父属性值，如'name=Vishal'，那么我应该得到它的所有子节点，如下所示

<computation type="student">
    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
</computation>

2）同样，如果我将属性传递给 type="student"，那么我应该获取它的所有子节点，如下所示

    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
    <module type="a8">
        <modPath>ggggggg</modPath>
        <modInputTemplate>ggggggg</modInputTemplate>
        <modSchematic>ggggggg</modSchematic>
    </module>

通过传递属性值来打印上述节点的逻辑是什么？

您可以使用 DOMParser 执行此操作。下面是一个示例。

var parser = new DOMParser();
var xml = '<your xml>';
var xmlDoc = parser.parseFromString(xml, 'text/xml');
// Now, you can simply query the xml document as you would the DOM...
var modules = xmlDoc.getElementsByTagName('module');
var vishalModules = xmlDoc.querySelector('[name="Vishal"] module');

这是一个满足你两个要求的小提琴：

https://jsfiddle.net/bcezsuc8/

更新

这是另一个小提琴，让所有的孩子都属于学生类型。请注意，它不使用 ActiveX。你可以只使用DOMParser，它是原生的javascript。

https://jsfiddle.net/bcezsuc8/3/

你可以试试这个库： https://github.com/cheeriojs/cheerio 

var cheerio = require('cheerio'),
$ = cheerio.load(xml);
$('computation[type=student]'); // your second exmaple

您可以在其文档中学习其他方法。

相关文章：