如何使用 JavaScript 将 XML 文档中的节点解析为 HTML 页面？

Question

我试图从 XML 提要中列出填字游戏的横向和纵向线索，但无法弄清楚如何深入到节点。这是 XML 的一个示例：

<across>
<a1 a="BLOC"
    c="Group of like-minded voters"
    n="1"
    cn="1" />
<a2 a="BATOR"
    c="Ulan ___, Mongolia"
    n="6"
    cn="5" />
<a3 a="OMEN"
    c="Black cat, supposedly"
    n="12"
    cn="10" />

...

<down>
<d1 a="BLIPS"
    c="Spots on a radar screen"
    n="1"
    cn="1" />
<d2 a="LIMIT"
    c="Word at the express checkout aisle"
    n="2"
    cn="2" />
<d3 a="OMANI"
    c="Man from Muscat"
    n="3"
    cn="3" />
<d4 a="CACKLE"
    c="Laugh like the Wicked Witch"
    n="4"
    cn="4" />

我在 javascript 中使用了以下方法：

document.getElementById('across_clues').innerText = xmlhttp.responseXML.getElementsByTagName('across')[0].childNodes;

document.getElementById('down_clues').innerText = xmlhttp.responseXML.getElementsByTagName('down')[0].childNodes;

我在 HTML 中创建了两个 div（“#across_clues”和“#down_clues”），但这就是我的 HTML 页面上呈现的内容：

ACROSS

[object NodeList]

DOWN

[object NodeList]

我确信这对我来说是一个相当简单的错误，因为我对使用 javascript 解析 XML 很陌生，但是我错过了什么？我是否需要传递另一个调用来实际列出 XML 数据？请指教。

谢谢， 卡洛斯

---

更新的问题

好的，这就是我在第二次尝试解决这个问题时遇到的问题：

我想出了如何从各个节点提取数据......一次一个，但我可以'不知道如何一次列出所有节点数组。我不想列出 、 等中的每个值...只有“cn”和“c”作为每个子节点的对（与 相同）。

这是我修改后的代码：

var across = xmlhttp.responseXML.getElementsByTagName('across')[0].childNodes;
var down = xmlhttp.responseXML.getElementsByTagName('down')[0].childNodes;

var a1Node = xmlhttp.responseXML.getElementsByTagName('a1')[0];
var a2Node = xmlhttp.responseXML.getElementsByTagName('a2')[0];

var d1Node = xmlhttp.responseXML.getElementsByTagName('d1')[0];
    var d1Node = xmlhttp.responseXML.getElementsByTagName('d2')[0];

    document.getElementById('across_clues').innerText = a1Node.getAttribute('cn');
document.getElementById('across_clues').innerText = a1Node.getAttribute('c');

document.getElementById('down_clues').innerText = d1Node.getAttribute('cn');
    document.getElementById('down_clues').innerText = d1Node.getAttribute('c');

结果：

只有一个属性呈现在 #accross_clues 中，而一个属性呈现在 #down_clues 中。每个 div 只显示列表中最后一个 .getAttribute() 调用...无论我列出了多少个。我也尝试了下面的功能，但仍然没有成功：

    function getAcross() {
    if (across) {
    var acrossNodes = across.childNodes;
    if (acrossNodes) {
    for (var i = 0; i < acrossNodes.length; i++) {
    var cnAttr = acrossNodes[i].getAttribute('cn');
    var cAttr = acrossNodes[i].getAttribute('c');
    document.getElementById('across_clues').innerText = cnAttr + '.' + cAttr;
      }
    }
  }
}

任何人都可以帮我解决这个问题吗？当谈到 XML 和 childNodes 时，我是一个严重的新手。非常感谢您的反馈。

谢谢， 卡洛斯

Answer 1

在这里，您将其称为 childNodes，它本身是一个对象，您可以使用索引访问 childNodes，例如 childNodes[0]、childNodes[1]，......
希望这对您有帮助

Answer 2

在您的代码中，您尝试将 XML DOM 节点集合（节点集合）分配给innerHTML 属性（字符串类型）。另外，标签 A1、A2 ... 未在 html 中定义：您期望得到什么？

在我看来，你可以从下一个开始（不使用外部库，仅使用 javascript）：（

• 不好的方式）使用 javascript 你可以从
  xmlhttp.responseXML.documentElement 并循环遍历所有 XML DOM
  树元素、属性、值并从中创建内容 HTML DOM
  节点树。您可以使用appendChild()追加这个根HTML DOM
  到您的文档 HTML DOM。
• （正确的方法）第二种方法更合适。您需要 XSL 文档来使用 XSLTProcessor 对象的 importStylesheet() 和 transformToFragment() 方法将 XML 文档转换为片段。您可以使用appendChild() 方法将此片段轻松附加到文档HTML DOM。 -

对于 IE8 及更低版本（对于未测试的 IE9），上述“正确方法”不起作用，因为未实现 XSLTProcessor。在 IE 中，您必须使用 transformNode(stylesheet)。这将创建 HTML 字符串，您可以将其分配给文档 HTML DOM 节点的innerHTML 属性。

更新： XSLTProcessor 无法在某些移动浏览器中实现。