从DOM创建对象

JavaScript: Create Object from DOM

本文关键字：创建对象 DOM      更新时间：2023-09-26

我想做一个可行走的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;
  }
}

但是它不起作用(循环没有运行)。有人能帮忙解决这个问题吗?

会发生什么?

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

没有尝试测试，看起来主要问题是您的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。

看起来像childNodes。长度不同的浏览器，也许你应该使用hasChildNodes代替?

另外，您是否使用firebug(或任何js调试器)来查看元素是否正确填写?

编辑:我发现什么是错的。不能创建对象的对象。相反，您必须创建对象数组。检查是否有childNodes，如果没有则创建一个对象。

就像你的python输出显示的那样:-)

相关文章：