JSON sérialiser un élément DOM

Question

Si je fais:

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 contient un objet vide pas les éléments iFrame POURQUOI ??

Answer 1

JSON (JavaScript Object Notation) est pas conçu pour sérialisation DOM nœuds, vous aurez besoin de sortir les choses que vous voulez par vous-même et d'écrire à un objet, puis recréer les noeuds DOM de cela si vous avez besoin.

En fait, Chrome n'exécute même pas votre code:

TypeError: Converting circular structure to JSON 

Answer 2

Je l'ai fait comme ça. Je mets le code sur 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); 
*/ 

Cette fonction javascript convertir tout élément à un objet, vous pouvez le convertir en JSON.

Answer 3

bâtiment sur le code prototypejs Alain, je l'ai mis à jour à l'aide de trait de soulignement et jQuery, a également mis en 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 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; 
} 

Cela fonctionne avec jquery 3.1.0 et underscore.js.