JSON сериализует элемент DOM

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

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.

Answer 4

Основываясь на коде prototypejs Алена, я обновил его, используя подчеркивание и jQuery, также поместил в гист здесь

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