JavaScript: создать объект из DOM

Question

Я пытаюсь создать дерево DOM, которое можно пройти, например:

Ввод :

<div>
  <span>Foo</span>
  <span>Bar</span>
</div>

Выход ( Python-как ) :

{'div': [{'span': 'Foo'},
         {'span': 'Bar'}]}

Я бы хотел пройти его так:

elements['div']['span']; // Output is "Foo".

Мой текущий код такой:

function createObject(element) {
  var object = {};

  if (element.childNodes.length > 0) {
    for (var i = 0; i < element.childNodes.length; i++) {
      object[element.tagName] = createObject(element.childNodes[i]);
    }

    return object;
  } else {
    return element.nodeValue;
  }
}

Но это не работает (цикл не работает).Может ли кто-нибудь помочь с этой проблемой?

Answer 1

Похоже, childNodes.length отличается в разных браузерах, может быть, вам стоит использовать hasChildNodes?

Кроме того, вы использовали firebug (или любой js-отладчик) для проверки правильности заполнения элемента?

Редактировать: Я нашел, что не так. Вы не можете создавать объекты из объектов. Вместо этого вы должны создать массив объектов. Проверьте, есть ли у вас childNodes, и создайте объект, если его нет. В противном случае создайте массив.

Точно так же, как ваш вывод, подобный Python, показывает: -)

Answer 2

Что должно произойти?

If no child         {name: value}
if childs           {name: [
                        {childname: childvalue}
                    ]}

Следуя этой логике, это результат.Примечание nodeName следует использовать вместо tagName.Также выделяются текстовые узлы, которые имеют nodeName # Text . If you want to only select elements, add if (element.childNodes [i] .nodeType == 1) `:

function createObject(element) {
  var object, childs = element.childNodes;

  if (childs.length > 0) {
    object = [];
    for (var i = 0; i < childs.length; i++) {
        //Uncomment the code if you want to ignore non-elements
        // if(childs.nodeType == 1) {
            object.push(createObject(childs[i]));
        // }
    }

    return object;
  } else {
    object = {};
    object[element.nodeName] = element.nodeValue;
    return object;
  }
}

Answer 3

Без попыток проверить это, похоже, что основная проблема в вашем цикле for ... in - он не работает в Javascript так же, как в Python.

for (child in element.childnodes)

, вероятно, должен бытьцикл на основе итератора:

for (var x=0, child; x<element.childNodes.length; x++) {
    child = element.childNodes[x];
    // etc
}

Вы также получите текстовые узлы, которые вы не ожидаете, и должны проверить child.nodeType != Node.TEXT_NODE перед повторением.