JavaScript：如何将DOM元素序列化为稍后要使用的字符串？

这可能看起来像一个奇怪的请求，它是非常不寻常的，但这是我正在努力解决的挑战。

假设你有一个DOM元素，它由HTML和一些应用的CSS组成，还有一些JS事件监听器。 我想克隆这个元素（以及所有应用的CSS和JS），将其序列化为一个字符串，我可以将其保存在数据库中，以便在将来的请求中添加到DOM中。

我知道jQuery有一些这样的方法（比如$ .css（）来获取计算出的样式）但是我怎么能做所有这些事情并把它变成一个我可以保存在数据库中的字符串呢？

更新：这是一个示例元素：

 
With some content
 
  #test_div { width: 200px } .some_class { background-color: #ccc }   $('#test_div').click(function(){ $(this).css('background-color','#0f0'); });  

……也许是一个示例序列化：

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

这将导致一个看起来像这样的字符串：

 
 
With some content
  

所以我可以把它作为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 */ }); 

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

我认为用于重新创建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 

Answer 5

请参阅https://github.com/ZeeAgency/jquery.htmlize – 这种方法似乎在我的测试中运行良好，但我不得不将其破解以使其在IE6中运行。

Answer 6

如果使用jQuery，这有什么意义吗？

 $(this).serialize() 

例如访问：

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