如何使用JavaScript將XML文檔中的節點解析為HTML頁面？

Question

我試圖從XML提要中列出填字游戲的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頁面上呈現的內容：

橫穿

[對象NodeList]

下

[對象NodeList]

我確定這是我的一個相當簡單的錯誤，因為我剛開始使用JavaScript解析XML，但我缺少什么呢？ 是否需要傳遞另一個電話以實際列出XML數據？ 請指教。

謝謝，卡洛斯

---

更新的問題

好的，這是我第二次嘗試解決此問題時遇到的問題：

我想出了如何一次從單個節點中提取數據，但一次也想不出如何列出一個節點數組。 我不想將，等等中的每個值都列出為（與相同的東西）的每個childNode成對的“ 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和childNode方面，我是一位認真的新手。 非常感謝您的反饋。

謝謝，卡洛斯

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無法在某些移動瀏覽器中實現。