JSON serialize a DOM element

If I do:

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 contains an empty object not the iframe ele开发者_开发问答ments WHY??

---

JSON (JavaScript Object Notation) is not designed for serializing DOM Nodes, you'll need to pull out the stuff you want by yourself and write it to an object, and then re-create the DOM Nodes from that if you need.

In fact, Chrome doesn't even execute your code:

TypeError: Converting circular structure to JSON

---

I did it like this. I put the code on 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);
*/

This javascript function convert any element to an object, then you can convert it to json.

---

Building on Alain's prototypejs code, I've updated it using underscore and jQuery, also put into a gist 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;
}

---

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

This is working with jquery 3.1.0 and underscore.js.