Question

我正在尝试从XML Feed中列出填字游戏的Across和Down线索，但无法弄清楚如何钻进节点。以下是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'作为每个childNode的一对（与之相同）。

这是我修改后的代码：

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中定义：你期望得到什么？

在我看来，你可以从下一步做一个（不使用extrenal libs，只使用javascript）：

（糟糕的方式）使用javascript你可以从开始 xmlhttp.responseXML.documentElement并循环遍历所有XML DOM 树元素，属性，值并从中创建内容HTML DOM 节点树。您可以使用appendChild（）附加此根HTML DOM 到您的文档HTML DOM。
（真正的方式）第二种方式更合适。您需要使用XSL文档将XML文档转换为片段，方法是使用 importStylesheet（）和 transformToFragment（） XSLTProcessor 对象的方法。您可以使用appendChild（）方法轻松地将此片段附加到文档HTML DOM。 -

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

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

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

更新的问题

2 个答案: