Как мне разобрать узлы из XML-документа в HTML-страницу, используя JavaScript?

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;

Я сделал два div в моем HTML ("#across_clues" и "#down_clues"), но это то, что отображается на моей HTML-странице:

1012 * ACROSS *

[объект NodeList]

DOWN

[объект NodeList]

Я уверен, что это довольно простая ошибка с моей стороны, так как я новичок в разборе XML с помощью javascript, но чего мне не хватает? Есть ли еще один вызов, который мне нужно передать, чтобы фактически перечислить данные XML? Пожалуйста, сообщите.

Спасибо, Carlos

---

ОБНОВЛЕННЫЙ ВОПРОС

Хорошо, вот что я натолкнулся на вторую попытку решить эту проблему:

Я выяснил, как получать данные с отдельных узлов ... по одному, но я не могу понять, как вывести список узлов одновременно. Я не хочу перечислять каждое значение в, и т.д ... только 'cn' и 'c' как пару для каждого childNode of (то же самое с).

Вот мой исправленный код:

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 и дочерних узлов. Ваше мнение очень ценится.

Спасибо, Carlos

Answer 1

В своем коде вы пытаетесь присвоить коллекцию узлов XML DOM (набор узлов) свойству innerHTML (строковый тип). Кроме того, теги A1, A2 ... не определены в html: что вы ожидаете получить?

На мой взгляд, вы можете сделать одно из следующего (без использования внешних библиотек, только с javascript):

• (плохой путь) С использованием JavaScript вы можете начать с xmlhttp.responseXML.documentElement и цикл по всем XML DOM элементы дерева, атрибуты, значения и создаваемый из них контент HTML DOM дерево узлов. Этот корневой HTML DOM вы можете добавить с помощью appendChild () к вашему документу HTML DOM.
• (верный путь) Второй способ более правильный. Вам необходим XSL-документ для преобразования вашего XML-документа во фрагмент с использованием importStylesheet () и transformToFragment () методов XSLTProcessor объекта. Этот фрагмент вы можете легко добавить в документ HTML DOM с помощью метода appendChild (). -

Для IE8 и менее (для IE9 не тестировался) вышеуказанный «истинный путь» не работает, поскольку XSLTProcessor не реализован. В IE вы должны использовать transformNode (таблица стилей) . Это создает строку HTML, и вы можете передать ее свойству innerHTML узла DOM HTML вашего документа.

Обновление: XSLTProcessor может быть не реализован в некоторых мобильных браузерах.

Answer 2

Здесь вы упоминаете его как childNodes, он сам по себе является объектом, и у вас есть доступ к childNodes с индексами, такими как childNodes [0], childNodes [1], .......... Надеюсь, это поможетвы