如何使用 JavaScript 遍历 XML 节点和子节点
How to loop through XML nodes and child nodes using JavaScript?
我目前在循环遍历 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
中 ),进入第一个子元素 (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
如果您有任何问题,我会尽我所能回答!
提前谢谢你!
将
循环的根附加到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的子节点,而不是孙节点
- js循环遍历单击的元素子节点
- 如何将数据添加到json的子节点
- 删除HTML节点而不删除其子节点
- 如何在javascript DOM api中获取具有给定条件的子节点
- 仅使用某些子节点访问xml中父节点的子节点
- 检测单击子节点并发送槽事件处理程序
- 从 d3.js 中的树中选择节点的子节点
- 访问所选剑道树视图节点的子节点
- 为什么正文标记后的脚本标记在子节点中计数
- 难以获取使用属性选择的节点的子节点
- 使用Javascript设置带有子节点的父节点的类's文本等于.
- 如何确定父节点是否有子节点
- 在没有 jquery 的情况下更改子节点(父节点具有 ID)中的链接文本
- Javascript - 子节点计数
- 在子节点上重复
- 如何在D3.js基于力的标签布局图中获取公共子节点
- 如何访问React中的子节点
- js初学者-如何在比网页中的DOM节点低一个级别上立即解析所有子节点
- cloneNode并将所有节点(父节点+子节点)的值相加.Javascript