JavaScript: comment sérialiser un élément DOM en tant que chaîne à utiliser plus tard?

Cela peut sembler une demande étrange, et c'est tout à fait normal, mais c'est un défi que j'essaie de résoudre.

Disons que vous avez un élément DOM, composé de HTML et de certains CSS appliqués, et de certains auditeurs de l'événement JS. Je voudrais cloner cet élément (et tous les CSS et JS appliqués), le sérialiser en tant que chaîne que je pourrais enregistrer dans une base de données à ajouter au DOM dans une future requête.

Je sais que jQuery a quelques-unes de ces méthodes (comme $ .css () pour obtenir les styles calculés), mais comment puis-je faire toutes ces choses et convertir une chaîne que je peux enregistrer dans une base de données?

Mise à jour: Voici un élément d'exemple:

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

… et peut-être un exemple de sérialisation:

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

Ce qui entraînerait une chaîne qui ressemble à ceci:

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

Afin que je puisse l'envoyer en tant que demande AJAX:

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

Ce qui précède n'est qu'un exemple. Il serait idéal si la sérialisation pourrait être très semblable à l'exemple d'origine, mais, pour autant que cela soit identique à l'original, je serais bien avec ça.

XMLSerializer.serializeToString() peut être utilisé pour convertir des nœuds DOM en chaîne.

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

Lien MDN

 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 */ });

J'ai un code à partir d'un exemple de http://api.jquery.com/jQuery.extend/ qui, je pense, vous aidera à obtenir une chaîne complète de votre objet. Je n'ai tout simplement pas compris comment revenir à un objet encore. Quoi qu'il en soit, je pense que c'est un début. Peut-être quelqu'un d'autre pourrait-il compléter cette réponse … ou moi-même je le fais plus tard.

Tout d'abord, créez un clone complet de votre élément:

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

Ensuite, le code de 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(", ") + " }"; };

Finalement:

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

Je pense que la chose la plus simple à utiliser pour recréer votre objet HTML serait un objet JSON, donc vous auriez besoin d'une fonction qui renverrait un objet JSON, que vous pourriez alors restreindre pour stocker dans un DB. Quelque chose comme le suivant pourrait vous indiquer dans la bonne direction, mais évidemment, il ne fonctionne pas complètement tel quel, serait très dépendante de l'élément DOM et vous devriez également écrire la fonction dans 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; }

Voir https://github.com/ZeeAgency/jquery.htmlize – cette approche semble fonctionner bien dans mes tests, mais je vais devoir la pirater un peu pour l'utiliser dans IE6.

Est-ce que cela a du sens si vous utilisez jQuery?

 $(this).serialize()

Par exemple visitez:

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