जावास्क्रिप्ट: बाद में उपयोग किए जाने वाले स्ट्रिंग के रूप में एक DOM तत्व को क्रमबद्ध कैसे करें?

Question

यह एक अजीब अनुरोध की तरह प्रतीत हो सकता है, और यह सामान्य से काफी अलग है, लेकिन यह एक चुनौती है जिसे मैं हल करने की कोशिश कर रहा हूं।

मान लें कि आपके पास एक डोम तत्व है, जो HTML से बना है और कुछ सीएसएस लागू किए जा रहे हैं, और कुछ जेएस ईवेंट श्रोताओं। मैं इस तत्व को क्लोन करना चाहता हूं (और सभी सीएसएस और जेएस लागू किए जा रहे हैं), इसे एक स्ट्रिंग के रूप में क्रमबद्ध करें जिसे मैं भविष्य में अनुरोध में डीओएम में जोड़ने के लिए डेटाबेस में सहेज सकता हूं।

मुझे पता है कि 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

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

क्या jQuery का उपयोग करते हुए यह कोई समझ में आता है?

$(this).serialize() 

उदाहरण यहां जाएं:

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

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

सबसे पहले, अपने तत्व की एक पूरी क्लोन बनाने मुझे लगता है कि आपके एचटीएमएल ऑब्जेक्ट को फिर से बनाने के लिए उपयोग करने वाली सबसे आसान चीज़ एक JSON ऑब्जेक्ट होगी, इसलिए आपको एक फ़ंक्शन की आवश्यकता होगी जो एक लौटाएगा जेएसओएन ऑब्जेक्ट, जिसे आप डीबी में स्टोर करने के लिए स्ट्रिंग कर सकते हैं। निम्नलिखित की तरह कुछ आपको सही दिशा में इंगित कर सकता है, लेकिन यह स्पष्ट रूप से पूरी तरह से काम नहीं कर रहा है, डीओएम तत्व पर काफी निर्भर होगा और आपको फ़ंक्शन को 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

XMLSerializer.serializeToString() का उपयोग डीओएम नोड्स को स्ट्रिंग में बदलने के लिए किया जा सकता है।

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

MDN Link