如何使用 JavaScript 遍历 XML 节点和子节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27045584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to loop through XML nodes and child nodes using JavaScript?
提问by Tommicchi
I'm currently having an issue with looping through XML nodes and displaying their child elements.
我目前在遍历 XML 节点并显示其子元素时遇到问题。
Here is what the XML looks like:
这是 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>
The algorithm I'm aiming for is:
我的目标算法是：
- Within root element (
monday), go into firstChild element (employee) - Loop through each child element of
employee(name,startTime,endTime,skills,programs) - For each child element, write text to HTML document
- Repeat steps 2 and 3 for each
employeeelement until iteration reaches lastChild element
- 在根元素 (
monday) 中，进入 firstChild 元素 (employee) - 循环遍历
employee(name,startTime,endTime,skills,programs) 的每个子元素 - 对于每个子元素，将文本写入 HTML 文档
- 对每个
employee元素重复步骤 2 和 3，直到迭代到 lastChild 元素
So far, I am only able to iterate and write only one elementof each employee. Here's the code for the nameelement:
到目前为止，我只能迭代和编写每个员工的一个元素。这是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>");
}
The output:
输出：
Employee 1
Employee 2
Employee 3
I've tried nesting another for loop within // line 1, however that results in nothing displayed in the output.
我试过在 中嵌套另一个 for 循环// line 1，但这导致输出中没有显示任何内容。
My goal for the correct output is:
我正确输出的目标是：
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
If you have any questions, I'll answer them the best I can!
如果您有任何问题，我会尽我所能为您解答！
Thank you ahead of hand!
提前谢谢你！
回答by Xenyal
Attaching the root of your loop on employeerather than namewould be better for nested loops (which is what this solution will use):
附加循环的根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>");
}
I also noticed the container for each employeeset of nodes is a day of the week. In the case where you want to iterate through every day of the week, you can create another nest outside of employeeIndexto loop through a dayIndexof sorts.
我还注意到每组employee节点的容器是一周中的一天。如果您想遍历一周中的每一天，您可以在外部创建另一个嵌套employeeIndex以循环遍历dayIndex各种类型。
