JavaScript：从 DOM 创建对象答案

【问题标题】：JavaScript: Create Object from DOMJavaScript：从 DOM 创建对象
【发布时间】：2011-11-13 05:31:20
【问题描述】：

我正在尝试制作一个可行走的 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;
  }
}

但它不起作用（循环不运行）。谁能帮忙解决这个问题？

【问题讨论】：

这一行有一个错误：object[element.tagName] = createObject(element.childNodes[i]);，在您的示例中，第二个跨度将消除第一个跨度，因为element.tagName 不是唯一的。
你确定你的意思是 tagName 而不是 nodeName？

标签： javascript dom object

【解决方案1】：

应该发生什么？

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

按照这个逻辑，这就是结果。注意应使用nodeName 而不是tagName。文本节点也被选中，有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;
  }
}

【讨论】：

【解决方案2】：

如果不尝试对此进行测试，主要问题似乎是您的 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。

【讨论】：

对不起，我发布了错误的代码块：P 我确实有一个正常的for 循环，但它根本没有被循环（不过，所有条件都满足了）。

【解决方案3】：

看起来 childNodes.length 因浏览器而异，也许您应该改用 hasChildNodes？

另外，您是否使用了 firebug（或任何 js 调试器）来查看元素是否正确填写？

编辑：我发现了问题所在。您不能创建对象的对象。相反，您必须创建对象数组。检查是否有 childNode，如果没有则创建一个对象。否则，创建一个数组。

就像你的类似 python 的输出显示:-)

【讨论】：

您绝对可以创建一个“对象的对象”（即属性存储对其他对象的引用的对象）。这只是算法的问题。
@Florian 感谢您回答我的问题。我为你投票。这是我能为你做的最多的事情:-)