如何使用 JavaScript 遍历 XML 节点和子节点？答案

【问题标题】：How to loop through XML nodes and child nodes using JavaScript?如何使用 JavaScript 遍历 XML 节点和子节点？
【发布时间】：2014-11-20 17:15:14
【问题描述】：

我目前在循环遍历 XML 节点并显示其子元素时遇到问题。

下面是 XML 的样子：

<?xml version="1.0" encoding="UTF-8"?>

<monday>
    <employee>
        <name>Employee 1</name>
        <startTime>12 PM</startTime>
        <endTime>3:30 PM</endTime>
        <skills>Web Development, Graphic Design</skills>
        <programs>Sublime Text</programs>
    </employee>
    <employee>
        <name>Employee 2</name>
        <startTime>10 AM</startTime>
        <endTime>2 PM</endTime>
        <skills>Graphic Design</skills>
        <programs>Illustrator, Photoshop</programs>
    </employee>
    <employee>
        <name>Employee 3</name>
        <startTime>12:30 PM</startTime>
        <endTime>3:30 PM</endTime>
        <skills>Social Media</skills>
        <programs>Facebook, Twitter, Instagram</programs>
    </employee>
</monday>

我的目标算法是：

在根元素 (monday) 中，进入 firstChild 元素 (employee)
循环遍历employee（name、startTime、endTime、skills、programs）的每个子元素
对于每个子元素，将文本写入 HTML 文档
对每个 employee 元素重复步骤 2 和 3，直到迭代到达 lastChild 元素

到目前为止，我只能迭代和编写每个员工的一个元素。这是name 元素的代码：

// loads XML file
if (window.XMLHttpRequest) {
  xhttp = new XMLHttpRequest();
} else { // for IE 5/6
  xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","assets/" + today + ".xml",false);
xhttp.send();
xmlDoc = xhttp.responseXML;
document.write("XML document loaded into an XML DOM Object." + "<br><br>"); // confirms XML file is loaded


// iterates through employees and displays their information
x = xmlDoc.getElementsByTagName("name");
for (i = 0; i < x.length; i++) {                  // line 1
    document.write(x[i].childNodes[0].nodeValue);
    document.write("<br>");
}

输出：

Employee 1
Employee 2
Employee 3

我尝试在 // line 1 中嵌套另一个 for 循环，但是这导致输出中没有显示任何内容。

我对正确输出的目标是：

Employee 1
Start Time: 12 PM
End Time: 3:30 PM
Skills: Web Development, Graphic Design
Programs: Sublime Text, Dreamweaver

Employee 2
Start Time: 11 AM
End Time: 32 PM
Skills: Graphic Design
Programs: Illustrator, Photoshop

Employee 3
Start Time: 12:30 PM
End Time: 3:30 PM
Skills: Social Media
Programs: Facebook, Twitter, Instagram

如果您有任何问题，我会尽力回答！

提前谢谢你！

【问题讨论】：

你反对把你的xml转换成json吗？这将使这个问题更直接
@BirgitMartinelle 我使用 XML 而不是 JSON 的原因是出于组织/结构的目的。另外，我觉得使用 XML 会更容易与同事分享，并且可以被更广泛的其他语言/程序（即 python、Excel 等）使用。
我并不是要更改您的服务返回的格式 - 但实际上是在您收到数据后转换它 - 有一些插件（如fyneworks.com/jquery/xml-to-json）可以为您将 xml 转换为 json - 仅用于 javascript - 如果您要将数据“提供”到 html 模板或类似的具有 json 的文件，将使您在 html/js 世界中的生活更轻松......如果不是这种情况，请忽略我；）跨度>

标签： javascript html xml

【解决方案1】：

将循环的根附加到 employee 而不是 name 对于嵌套循环（这是此解决方案将使用的）更好：

var employees = xmlDoc.getElementsByTagName("employee"); //outputs array of employees

for (employeeIndex = 0; employeeIndex  < employees.length; employeeIndex++) {
    var empDetails = employees[employeeIndex].children; //outputs array of details

    for (detailIndex = 0; detailIndex < empDetails.length; detailIndex++) {
        document.write(employees[employeeIndex].childNodes[detailIndex].nodeValue);
    }

    document.write("<br>");
}

我还注意到每个employee 节点集的容器是一周中的一天。如果您想遍历一周中的每一天，您可以在 employeeIndex 之外创建另一个嵌套以循环遍历 dayIndex 之类的。

【讨论】：