¿Alguna forma ingeniosa de serializar un elemento HTML? – Javascript

Intento almacenar una reference de una label HTML para su posterior reutilización.

Por ejemplo, si hago clic en un div y guardo un puntero a ese div dentro de Javascript, ¿habrá alguna forma de serializar dicho puntero? Entonces, ¿podría deserializarlo y usar el puntero en otra instancia de la aplicación web?


Solo los methods que puedo pensar son los siguientes:

  • Use los attributes id o name

  • Crea un selector de CSS para ese elemento

¿Alguna otra idea, chicos? =)

Podría intentar generar una cadena XPath para el elemento: cuanto más compleja sea la cadena, más preciso y portátil será el identificador.

Por ejemplo, una cadena de consulta XPath de elemento simple no sería muy única y es probable que vuelva a producirse:

'//html/body/div/div/p/strong' 

El factorizar todos los attributes puede ser excesivo

 '//html/body[@onclick="somereallylongjavascript" and class="nosidebar"]/div[@id="wrapper" and @class="posts"]/div[@class="entry" and @id="firstentry"]/p[@class="first"]/strong' 

Pero probablemente pueda encontrar un buen término medio al limitarse a ciertos attributes, tal vez solo a los ID:

 '//html/body/div[@id="wrapper"]/div[@id="firstentry"]/p/strong' 

Puede recuperar XPath de forma nativa en todos los browseres. Está el método W3C:

 var myElement=document.evaluate( XPathstring, document, function(ns){return{'html':'http://www.w3.org/1999/xhtml','':null}[ns];}, 9, null ).singleNodeValue; 

(la function ns es puramente si necesita la aplicación / xhtml + xml)

El método IE es más simplist pero less flexible:

 var myElement=document.selectSingleNode(XPathString); 

La creación de la cadena XPath es un problema diferente, por supuesto, hay varias opciones, ninguna nativa desafortunadamente. XPather es un complemento moz que proporciona una interfaz que hace esto: su fuente es MPL-ed y es relativamente simple, pero probablemente sea más de lo que necesita. Hay varios scripts más cortos disponibles que proporcionan soluciones más simples.

Editar: Justin Johnson ha proporcionado un enlace a una respuesta SO que contiene una function MUY corta de generación de XPath. Es un poco simplist, usa notación de identificación impar ( id(blah) lugar de [@id="blah"] ) y no toLowerCase() es tagName s, lo que podría perjudicar la portabilidad, pero aparte de eso, se ve perfecto para su necesariamente.

¿Qué estás tratando de salvar exactamente? ¿Y dónde exactamente lo estás reutilizando?

Un elemento DOM sería muy específico para esa representación del browser en particular en esa página: tan solo presionando actualizar le dará un elemento DOM completamente nuevo. Entonces, ¿qué pasa si necesitas save y recrear?

¿Qué tal el innerHTML del elemento?

La única forma lógica es usar id.

Usualmente no es difícil asignar ID a todos los elementos importantes en base a los valores de la database.

Según la forma en que networkingactaste tu pregunta, no creo que eso sea posible. ¿Qué quiere decir exactamente con "otra instancia de la aplicación web"? Dado que JavaScript se ejecutará en el lado del cliente, no podrá compartir datos entre los clientes. Sin embargo, es posible que desee hacer algo como almacenar / leer desde una database. ¿Puedes describir más de la funcionalidad que estás tratando de lograr?

XPath parece ser el más apropiado; sin embargo, solo si la estructura de la página es (relativamente) estática hasta ese nodo. Aquí hay algunas references y códigos:

Método para get el xpath de un nodo arbitrario y uso de ejemplo

 getPathTo($("a")[4]): 

performances

 "id("hlinks-custom")/A[2]" 

Documentación MDC XPath

Parece que JSON.stringify (yourDivReference) y JSON.parse (serializedObjectString) pueden hacer lo que estás buscando.

ACTUALIZACIÓN: En realidad, a los methods JSON no les gustan las references circulares en el DOM. Consulte esta pregunta para get más detalles: ¿cómo serializar el nodo DOM a JSON incluso si hay references circulares?

Sin embargo, estoy de acuerdo con Sergey en que usar el ID parece ser una mejor forma de hacerlo.

Otra idea: generar identificadores personalizados propios para todos los elementos en function de algunas reglas:

  1. la identificación del elemento comienza desde la ID del padre. -> customid = "cuerpo / elemento"
  2. Si la identificación normal está disponible, úsalo. si no, usa el tipo de elemento. Que agregar order en el subtree actual.

entonces, obtendrás algo como "cuerpo-0 / elemento-0" por ejemplo arriba o "cuerpo-0 / div-4" si no se conoce el id.

Cuando intente utilizar su "ID personalizado" y la página se modificará, tendrá la oportunidad de encontrar el elemento más cercano, comparando todos los elementos de identificación personalizada con el "ID personalizado" almacenado.

He intentado algo como esto:

 {tag:"div", style:"float:left;", "class":"fancy", inner:[ {tag:"a", href:"http://google.com", inner:"A link to google!" }, {tag:"a", href:"http://yahoo.com", inner:"A link to yahoo!" } ]} 

Parece funcionar bien, aunque es fácil perderse con todas las llaves.

editar – tal vez entendí mal lo que quieres … si quieres serializar un manejador para ese elemento, como lo que getElementById devolvería, igual podrías usar el ID.