JavaScript: как сериализовать элемент DOM в качестве строки, которая будет использоваться позже?

Это может показаться странным запросом, и это довольно необычно, но это проблема, которую я пытаюсь решить.

Скажем, у вас есть элемент DOM, который состоит из HTML и некоторых применяемых CSS, и некоторых слушателей событий JS. Я хотел бы клонировать этот элемент (и все применяемые CSS и JS), сериализовать его как строку, которую я мог бы сохранить в базе данных, которая будет добавлена в DOM в будущем запросе.

Я знаю, что у jQuery есть несколько таких методов (например, $.css() для получения вычисленных стилей), но как я могу сделать все эти вещи и превратить их в строку, которую я могу сохранить в базе данных?

Обновление: Вот пример:

<div id="test_div" class="some_class">
    <p>With some content</p>
</div>

<style>
#test_div { width: 200px }
.some_class { background-color: #ccc }
</style>

<script>
$('#test_div').click(function(){
    $(this).css('background-color','#0f0');
});
</script>

... и, возможно, пример сериализации:

var elementString = $('#test_div').serializeThisElement();

который приведет к строке, которая выглядит примерно так:

<div id="test_div"
     class="some_class" 
     style="width:200px; background-color:#ccc" 
     onclick="javascript:this.style.backgroundColor='#0f0'">
    <p>With some content</p>
</div>

поэтому я мог бы отправить его как запрос AJAX:

$.post('/save-this-element', { element: elementString } //...

Вышеприведенный пример является лишь примером. Было бы идеально, если бы сериализация выглядела очень похожей на исходный пример, но, пока она делает то же самое, что и оригинал, мне было бы хорошо с этим.

Ответ 1

XMLSerializer.serializeToString() может использоваться для преобразования узлов DOM в строку.

 var s = new XMLSerializer();
 var d = document;
 var str = s.serializeToString(d);
 alert(str);

Ссылка MDN

Ответ 2

var elem = ...;
var clone = elem.cloneNode(true);
var uuid = get_uuid();
storedElements[uuid] = clone;
storeInDatabase(uuid);

/* some time later */

getFromDatabase(function (uuid) {
    var elem = storedElements[uuid];
    /* do stuff */
});

Ответ 3

У меня есть фрагмент кода из примера http://api.jquery.com/jQuery.extend/, который, я думаю, поможет вам получить полную строку вашего объект. Я просто не понял, как вернуть его обратно объекту. Во всяком случае, я думаю, что это начало. Может быть, кто-то еще может завершить этот ответ... или я сам сделаю это позже.

Прежде всего, создайте полный клон вашего элемента:

var el = $('div').clone(true, true);

Затем код из api.jquery.com:

var printObj = function(obj) {
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? printObj(val) : val;
        arr.push( next );
    });
    return "{ " +  arr.join(", ") + " }";
};

Наконец:

var myString = printObj($(el).get(0));

Ответ 4

Я думаю, что самая легкая вещь, которую можно использовать для воссоздания вашего объекта HTML, будет объектом JSON, поэтому вам понадобится функция, которая вернет объект JSON, который вы могли бы затем укрепить для хранения в БД. Что-то вроде следующего может указывать на вас в правильном направлении, но, очевидно, оно не работает полностью, как есть, будет сильно зависеть от элемента DOM, и вам также придется написать функцию для deserializeObject.

    // NOT TESTED OR WORKING PROPERLY, FOR EXAMPLE ONLY
    // htmlObject is a raw HTML DOM element
    function serializeObject (htmlObject) {
        var objectToStore = {
            htmlElement: htmlObject.toString(),
            id: htmlElement.id,
            attrs: getAttrs(htmlObject) },
            css: htmlElement.style.cssText
        }
        return objectToStore;
    }
    function getAttrs(htmlObject) { 
      var tmp = [], i; 
      for (i = 0, i<htmlObject.attributes.length; i++) { 
        tmp.push({htmlObject.attributes[i].nodeName: htmlObject.attributes[i].value}); 
      } 
      return tmp;
    }

Ответ 5

См. https://github.com/ZeeAgency/jquery.htmlize - этот подход, похоже, хорошо работает в моих тестах, хотя мне придется взломать его бит, чтобы заставить его работать в IE6.

Ответ 6

Это имеет смысл при использовании jQuery?

$(this).serialize()

Например, посетите:

http://api.jquery.com/serialize/