JSON serialize a DOM element

Question

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


        

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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