javascript将dom结构转换为哈希对象

我需要从DOM结构的选定元素生成合理的哈希：

    <div name="stuff" class="category">
        <div class="category" name="Person">
            <div class="option selected" >Kennedy</div>
        </div>
        <div class="category" name="fruit">
            <div class="option" >Apple</div>
            <div class="option selected" >Banana</div>
        </div>
        <div class="category" name="Org">
            <div class="option" name="Association">
                <div class="option" >NBA</div>
                <div class="option selected" >MPAA</div>
            </div>
            <div class="option" name="Federation">
                <div class="option" >Russian</div>
                <div class="option" >United Federation of Planets</div>
            </div>
        </div>
    </div>

    <div name="attributes" class="category">
        <div class="category" name="color">
            <div class="option selected" >red</div>
            <div class="option" >yellow</div>
        </div>
        <div class="category" name="time">
            <div class="option selected" >future</div>
            <div class="option" >past</div>
        </div>
    </div>

我该怎么做？谢谢

我今天又拍了一张照片： 我注意到的一些事情是上面DOM中的错误。关联和联合应该是类别，而不是选项。很显然，如果它们是选项（例如，如果联合和关联是互斥的），那么关联将被“选择”

假设它们是类别，下面是我的代码：

function DOMtoJSON(el){
  el.find('div.option:not(.selected)').remove();
  el.find('div.option:empty').remove();

  var createObj = function (thisCategory, parentObj) {
    if (thisCategory.children('.option').length > 0) {
      parentObj[thisCategory.attr('name')] = thisCategory.children('.option').text();
    }
    if (thisCategory.children('.category').length > 0) {
      parentObj[thisCategory.attr('name')] = {};
      thisCategory.children('.category').each(function () {
        createObj($(this), parentObj[thisCategory.attr('name')]);
      });
    } else {
      return parentObj;
    }
  }
  var obj = {}
      el.children('.category').each(function () {
        createObj($(this), obj)
      });

  return obj;
}


var root = DOMtoJSON($('#root'));
document.getElementById('root').innerHTML = JSON.stringify(root);

---

谁能给我一些标准吗。那太好了

你可以使用这个jquery插件来实现它

我在这里提供了一个可行的解决方案，如果感觉笨拙的话：

代码如下：

function childrenWithAttribute(el,tagName,attrName){
  if (!tagName)  tagName = '*';
  if (!attrName) attrName = 'name';
  var kids = [];
  for (var i=0,len=el.childNodes.length;i<len;++i){
    var kid = el.childNodes[i];
    if (tagName!='*' && kid.tagName != tagName) continue;
    if (kid.nodeType!=1) continue;
    if (!kid.hasAttribute(attrName)) continue;
    kids.push(kid);
  }
  return kids;
}

function objectify(el,kidTags,kidAttr){
  if (!kidTags) kidTags = '*';
  if (!kidAttr) kidAttr = 'name';
  var kids = childrenWithAttribute(el,kidTags,kidAttr);
  if (kids.length){
    var obj = {};
    for (var i=0,len=kids.length;i<len;++i){
      var key = kids[i].getAttribute(kidAttr);
      obj[key] = objectify(kids[i],kidTags,kidAttr);
    }
    return obj;
  }else{
    return (el.getElementsByClassName('selected')[0] ||
           el.getElementsByClassName('option')[0]   ||
           el.getElementsByTagName('*')[0]).textContent;
  }
}
var root = objectify( document.getElementById('root') );
document.getElementById('output').innerHTML = JSON.stringify(root);

---

它与您想要的输出不完全匹配，它包括“联合”选项，即使没有“选择”任何“选项”-但它可以让您实现90%的目标。现在你可以自己完成了。

谢谢，有趣的插件。我也希望能学到更多的编程！也许你应该注意到，虽然乍一看你的解决方案看起来像是普通的javascript，但它不是/你还包括了一个框架（MooTools）@CharlesLeaf，你认为我为什么这么做？哦，因为那是JSFIDLE的默认库？不，上面是纯JavaScript。我会更新提琴以显示这一点。它是纯javascript。没有人会对Mootool纯粹的惊人之处大惊小怪：POh，我认为这是因为

JSON.stringify

，但我看到现代浏览器现在确实有了对它的本地支持。我已经习惯了必须支持多种浏览器/版本，所以不能总是这么认为。我的坏，每天学点东西：-）仍然值得注意这不是一个100%跨浏览器的解决方案，我想…谢谢。不过，我不确定我是否理解这一切我用你的代码作为基础，用jQuery写了一些东西。你能给我一些反馈吗？你为什么用你的方式做你的事，和我的相比又如何？谢谢

function childrenWithAttribute(el,tagName,attrName){
  if (!tagName)  tagName = '*';
  if (!attrName) attrName = 'name';
  var kids = [];
  for (var i=0,len=el.childNodes.length;i<len;++i){
    var kid = el.childNodes[i];
    if (tagName!='*' && kid.tagName != tagName) continue;
    if (kid.nodeType!=1) continue;
    if (!kid.hasAttribute(attrName)) continue;
    kids.push(kid);
  }
  return kids;
}

function objectify(el,kidTags,kidAttr){
  if (!kidTags) kidTags = '*';
  if (!kidAttr) kidAttr = 'name';
  var kids = childrenWithAttribute(el,kidTags,kidAttr);
  if (kids.length){
    var obj = {};
    for (var i=0,len=kids.length;i<len;++i){
      var key = kids[i].getAttribute(kidAttr);
      obj[key] = objectify(kids[i],kidTags,kidAttr);
    }
    return obj;
  }else{
    return (el.getElementsByClassName('selected')[0] ||
           el.getElementsByClassName('option')[0]   ||
           el.getElementsByTagName('*')[0]).textContent;
  }
}
var root = objectify( document.getElementById('root') );
document.getElementById('output').innerHTML = JSON.stringify(root);

{
  "stuff":{
    "Person":"Kennedy",
    "fruit":"Banana",
    "Org":{
      "Association":"MPAA",
      "Federation":"Russian"
    }
  },
  "attributes":{
    "color":"red",
    "time":"future"
  }
}