XML 应用
本章演示了一些使用 XML、HTTP、DOM 和 JavaScript 的 HTML 应用程序。
使用的 XML 文档
在本章中，我们将使用名为 “cd_catalog.xml”.
在 HTML 表中显示 XML 数据
此示例循环遍历每个<CD>元素，并显示<ARTIST>和<TITLE>HTML 表中的元素：
例子
<table id="demo"></table>
<script>
函数 loadXMLDoc() {
const xhttp = 新的 XMLHttpRequest();
xhttp.onload = 函数（）{
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
我的功能（cd）；
}
xhttp.打开("GET", "cd_catalog.xml");
发送（）；
}
函数 myFunction（cd）{
让表="<tr><th> 艺术家</th><th>标题</th></tr> “；
对于（让 i = 0; i < cd.length; i++）{
表 += "<tr><td> “ +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
“</td><td> “ +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
“</td></tr> “；
}
document.getElementById("演示").innerHTML = 表格;
}
</script>
</body>
</html>
亲自尝试 »
有关使用 JavaScript 和 XML DOM 的更多信息，请访问 DOM 简介。
在 HTML div 元素中显示第一张 CD
此示例使用函数在 id="showCD" 的 HTML 元素中显示第一个 CD 元素：
例子
const xhttp = 新的 XMLHttpRequest();
xhttp.onload = 函数（）{
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
我的功能（cd， 0）；
}
xhttp.打开("GET", "cd_catalog.xml");
发送（）；
函数 myFunction(cd，i) {
document.getElementById(“显示CD”)。innerHTML =
“艺术家：” +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
“<br> 标题：” +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
“<br> 年份：" +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
亲自尝试 »
在 CD 之间导航
要在上例中的 CD 之间导航，请创建一个 next() 和previous() 功能：
例子
函数 next() {
// 显示下一张 CD，除非您已经播放到最后一张 CD
如果 (i < len-1) {
我++；
显示CD（i）；
}
}
函数上一个（）{
// 显示上一张 CD，除非您在第一张 CD 上
如果 (i > 0) {
我 - ;
显示CD（i）；
}
}
亲自尝试 »
单击 CD 时显示专辑信息
最后一个例子展示了如何在用户点击 CD 时显示专辑信息：
例子
函数显示CD（i）{
document.getElementById(“显示CD”)。innerHTML =
“艺术家：” +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
“<br> 标题：” +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
“<br> 年份：" +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
亲自尝试 »
