JavaScript: jak serializować element DOM jako ciąg do późniejszego użycia?

Question

Może to wydawać się dziwną prośbą i jest to dość niezwykłe, ale jest to wyzwanie, które próbuję rozwiązać.

Załóżmy, że masz element DOM, który składa się z kodu HTML i niektórych zastosowanych stylów CSS oraz niektórych detektorów zdarzeń JS. Chciałbym sklonować ten element (i wszystkie stosowane CSS i JS), serializować je jako ciąg, który mógłbym zapisać w bazie danych, aby dodać ją do DOM w przyszłym żądaniu.

Wiem, że jQuery ma kilka z tych metod (takich jak $ .css(), aby uzyskać obliczone style), ale jak mogę zrobić te wszystkie rzeczy i przekształcić je w ciąg znaków, który mogę zapisać w bazie danych?

Aktualizacja: Tutaj jest elementem przykład:

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

... a może serializacji próbki:

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

co skutkowałoby sznurku, który wygląda mniej więcej tak:

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

, więc mogę wysłać go jako żądanie AJAX:

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

Powyższe stanowi jedynie przykład. Byłoby idealnie, gdyby serialowanie mogło wyglądać bardzo podobnie do oryginalnego przykładu, ale dopóki będzie to samo, co oryginał, byłoby mi z tym dobrze.

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

Czy ma to sens, jeśli używasz jQuery?

$(this).serialize() 

Na przykład wizyta:

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

Answer 3

Mam kawałek kodu z przykładu http://api.jquery.com/jQuery.extend/ że myślę, że pomogą Ci uzyskać pełny ciąg Twojego obiektu. Po prostu nie wiedziałem, jak wrócić do obiektu. W każdym razie, myślę, że to początek. Może ktoś inny może ukończyć tę odpowiedź ... lub sam to zrobię później.

Przede wszystkim stworzyć kompletny klon swojego elementu:

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

Następnie kod z 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(", ") + " }"; 
}; 

Wreszcie:

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

Answer 4

Myślę, że najłatwiejszą rzeczą do odtworzenia obiektu HTML byłby obiekt JSON, więc potrzebna byłaby funkcja, która zwróciłaby Obiekt JSON, który można następnie uszeregować w celu przechowywania w DB. Coś takiego jak poniższe może wskazywać ci właściwy kierunek, ale oczywiście nie działa tak jak jest, byłoby całkiem zależne od elementu DOM i musiałbyś napisać funkcję również do 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

Zobacz https://github.com/ZeeAgency/jquery.htmlize - takie podejście wydaje się działać dobrze w moich testów, choć ja będę musiał włamać się go trochę, aby go do pracy w IE6.

Answer 6

XMLSerializer.serializeToString() może być użyty do konwersji węzłów DOM na łańcuch.

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

MDN Link