我目前在遍历 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
,程序
) - 对于每个子元素,将文本写入 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
有什么问题,我会尽量解答的!
先谢谢你!
最佳答案
将循环的根附加到 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
。
关于javascript - 如何使用 JavaScript 遍历 XML 节点和子节点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27045584/