JavaScript: как сериализовать элемент DOM как строку для последующего использования?

Question

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

Допустим, у вас есть элемент 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 } //...

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

Answer 1

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

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

MDN Link

Answer 2

Я думаю, что самой простой вещью, которую можно использовать для воссоздания вашего 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;
    }

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

Answer 4

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 */
});

Answer 5

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

Answer 6

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

$(this).serialize() 

Например, визит:

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