JavaScript：从DOM创建对象 [英] JavaScript: Create Object from DOM

问题描述

我正在尝试制作一个步行DOM树，如下所示：

I'm trying to make a walkable DOM tree, like so:

输入：

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

输出（类似Python的）

Output (Python-like):

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

我想像这样遍历：

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

我目前的代码是这样的：

My current code is this:

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;
  }
}

但它不工作（循环不' t运行）。有没有人可以帮助解决这个问题？

But it doesn't work (the loop doesn't run). Could anyone help with this problem?

推荐答案

应该怎么办？

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

按照逻辑，这是结果。应该使用 nodeName 而不是 tagName 。还选择了文本节点，它们具有 nodeName #Text 。如果您只想选择元素，请添加 if（element.childNodes [i] .nodeType == 1）`：

Following that logic, this is the result. Note nodeName should be used instead of tagName. Text nodes are also selected, which have nodeName #Text. If you want to only select elements, addif(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;
  }
}

这篇关于JavaScript：从DOM创建对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！