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链接

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