Question

如果我这样做：

var el =
{
   o : document.createElement("iframe")
}

var fs = JSON.stringify(el);

and then I try to access with

var ofs = JSON.parse(fs);

ofs.o包含一个空对象，而不是iframe元素为什么？

Answer 1

JSON（ JavaScript对象表示法）不设计用于序列化DOM节点，您需要自己提取所需的内容并将其写入对象，然后根据需要重新创建DOM节点。

事实上，Chrome甚至不执行您的代码：

TypeError: Converting circular structure to JSON

Answer 2

我是这样做的。我把代码放在github

上

function elementToObject(element, o) {
    var el = $(element);
    var o = {
       tagName: el.tagName
    };
    var i = 0;
    for (i ; i < el.attributes.length; i++) {
        o[el.attributes[i].name] = el.attributes[i].value;
    }

    var children = el.childElements();
    if (children.length) {
      o.children = [];
      i = 0;
      for (i ; i < children.length; i++) {
        child = $(children[i]);
        o.children[i] = elementToObject(child, o.children) ;
      }
    }
    return o;
  }
/*
  exemple:
  a = elementToObject(document.body);
  Object.toJSON(a);
*/

此javascript函数将任何元素转换为对象，然后您可以将其转换为json。

Answer 3

在Alain的prototypejs代码的基础上，我使用下划线和jQuery更新它，也放入了要点here

function elementToObject(element, recurse) {
    var el = $(element),
        o = {
            tagName: el[0].tagName
        };

    _.each(el[0].attributes, function(attribute){
        o[attribute.name] = attribute.value;
    });

    if (recurse) {
        o.children = _.map(el.children(), function(child){
            return this.elementToObject(child, true);
        }, this);
    }
    return  o;
}

Answer 4

function elementToObject(element) {
    var el = $(element)[0];
    var o = {tagName: el.tagName};
    _.each(el.attributes, function(attribute){o[attribute.name] = attribute.value;});
    o["children"]=_.map($(el).children(), function(child){return elementToObject(child)});
    return o;
}

这适用于jquery 3.1.0和underscore.js。

JSON序列化一个DOM元素

4 个答案: