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

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<htmlObject.attributes.length; i++) { 
        tmp.push({htmlObject.attributes[i].nodeName: htmlObject.attributes[i].value}); 
      } 
      return tmp;
    }

Answer 5

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

Answer 6

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

$(this).serialize()

例如访问：

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

JavaScript：如何将DOM元素序列化为字符串以便以后使用？

6 个答案: