JavaScript: làm thế nào để tuần tự hóa phần tử DOM dưới dạng chuỗi được sử dụng sau này?

Question

Điều này có vẻ giống như một yêu cầu kỳ lạ, và nó khá là bình thường, nhưng đó là một thách thức mà tôi đang cố giải quyết.

Giả sử bạn có phần tử DOM, được tạo thành từ HTML và một số CSS đang được áp dụng và một số trình xử lý sự kiện JS. Tôi muốn sao chép phần tử này (và tất cả CSS và JS đang được áp dụng), tuần tự hóa nó như một chuỗi mà tôi có thể lưu trong cơ sở dữ liệu để được thêm vào DOM trong một yêu cầu trong tương lai. Tôi biết jQuery có một vài trong số các phương thức này (như $ .css() để có được các kiểu tính toán) nhưng làm cách nào tôi có thể thực hiện tất cả những thứ này và biến nó thành chuỗi mà tôi có thể lưu trong cơ sở dữ liệu?

Cập nhật: Dưới đây là một yếu tố ví dụ:

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

... và có thể là một serialization mẫu:

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

mà sẽ cho kết quả trong một chuỗi mà trông giống như sau:

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

để tôi có thể gửi dưới dạng yêu cầu AJAX:

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

Ở trên chỉ là ví dụ. Nó sẽ là lý tưởng nếu serialization có thể trông rất giống với ví dụ ban đầu, nhưng miễn là nó render giống như bản gốc, tôi sẽ ổn với điều đó.

Answer 1

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 2

Điều này có ý nghĩa gì không nếu sử dụng jQuery?

$(this).serialize() 

Ví dụ truy cập:

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

Answer 3

Tôi đã có một đoạn mã từ một ví dụ về http://api.jquery.com/jQuery.extend/ mà tôi nghĩ rằng sẽ giúp bạn để có được một chuỗi hoàn chỉnh các đối tượng của bạn. Tôi chỉ không biết làm thế nào để biến nó trở lại một đối tượng được nêu ra. Dù sao, tôi nghĩ đó là một sự khởi đầu. Có lẽ ai đó khác có thể hoàn thành câu trả lời này ... hoặc bản thân tôi làm điều đó sau.

Trước hết, tạo một bản sao hoàn chỉnh của nguyên tố của bạn:

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

Sau đó, mã từ 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(", ") + " }"; 
}; 

Cuối cùng:

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

Answer 4

Tôi nghĩ rằng điều dễ nhất để sử dụng để tạo lại đối tượng HTML của bạn sẽ là một đối tượng JSON, vì vậy bạn cần một hàm trả về Đối tượng JSON, sau đó bạn có thể xâu chuỗi để lưu trữ trong DB. Một cái gì đó như sau có thể chỉ cho bạn đi đúng hướng, nhưng nó rõ ràng là không làm việc đầy đủ như là, sẽ là khá phụ thuộc vào yếu tố DOM và bạn sẽ phải viết các chức năng để deserializeObject là tốt.

// 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

Xem https://github.com/ZeeAgency/jquery.htmlize - phương pháp này dường như làm việc tốt trong các thử nghiệm của tôi, mặc dù tôi sẽ phải hack nó lên một chút để có được nó để làm việc trong IE6.

Answer 6

XMLSerializer.serializeToString() có thể được sử dụng để chuyển đổi các nút DOM thành chuỗi.

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

MDN Link