javascript - que - ¿Cómo serializar el nodo DOM a JSON incluso si hay referencias circulares?

nextsibling javascript

Question

Quiero serializar el nodo DOM o incluso toda la window a JSON.

Por ejemplo:

 >> serialize(document)
    -> {
      "URL": "http://stackoverflow.com/posts/2303713",
      "body": {
        "aLink": "",
        "attributes": [
          "getNamedItem": "function getNamedItem() { [native code] }",
          ...
        ],
        ...
        "ownerDocument": "#" // recursive link here
      },
      ...
    }

JSON.stringify ()

JSON.stringify(window) // TypeError: Converting circular structure to JSON

El problema es que JSON no admite referencias circulares de manera predeterminada.

var obj = {}
obj.me = obj
JSON.stringify(obj) // TypeError: Converting circular structure to JSON

window y los nodos DOM tienen muchos de ellos. window === window.window as will como document.body.ownerDocument === document .

Además, JSON.stringify no serializa funciones, por lo que esto no es lo que estoy buscando.

dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references:

    var obj = {}
    obj.me = obj
    dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}}

Bien, ¿no es así?

 dojox.json.ref.toJson(window) // Error: Can''t serialize DOM nodes

Bueno, no es lo suficientemente bueno para mí.

¿Por qué?

Estoy tratando de hacer tabla de compatibilidad DOM para diferentes navegadores. Por ejemplo, Webkit admite el atributo de marcador de posición y Opera no, el IE 8 admite localStorage y IE 7 no, y así sucesivamente.

No quiero hacer miles de casos de prueba. Quiero hacer una forma genérica para probarlos todos.

Actualización, junio de 2013

Hice un prototipo NV/dom-dom-dom.com .

Answer 1

Encontré this y me funcionó muy bien cuando intentaba convertir una cadena XML en JSON.

XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(xmlString));

Quizás ayude.

Answer 2

Es posible atravesar el DOM y generar una representación pura del objeto JS y luego alimentarlo al serializador DojoX. Sin embargo, primero debe decidir cómo planea mapear los elementos DOM, sus atributos y los nodos de texto, sin ambigüedad, a los objetos JS. Por ejemplo, ¿cómo representarías lo siguiente?

<parent attr1="val1">
  Some text
  <child attr2="val2"><grandchild/></child>
</parent>

¿Me gusta esto?

{
    tag: "parent",
    attributes: [
        {
            name: "attr1",
            value: "val1"
        }
    ],
    children: [
        "Some text",
        {
            tag: "child",
            attributes: [
                {
                    name: "attr2",
                    value: "val2"
                }
            ],
            children: [
                { tag: "grandchild" }
            ]
         }
     ]
 }

Creo que la razón por la que DojoX no admite inmediatamente la serialización de DOM podría ser exactamente esto: la necesidad de elegir primero un esquema para mapear objetos DOM a JS. ¿Hay un esquema estándar que pueda ser empleado? ¿Su objeto JS simplemente imitaría un árbol DOM sin ninguna función? Creo que primero debe definir cuál es su expectativa de "serializar DOM a JSON".

Answer 3

Parece que tienes que escribirlo solo. Los datos serializados de JSON tampoco pueden ser la opción perfecta para su tarea (tabla de compatibilidad DOM). Probablemente tengas que iterar los objetos por tu cuenta, verificar tipos de atributos, etc.

var functions = [];
var strings = [];
for( var key in window ) {
    if( typeof window[key] == ''string'' ) {
        strings[strings.length] = key;
    } else if( typeof window[key] == ''function'' ) {
        functions[functions.length] = key;
    } else if( ... ) { ... }
}
...

Answer 4

http://jsonml.org/ toma una foto de una gramática para convertir elementos XHTML DOM en JSON. Un ejemplo:

<ul>
    <li style="color:red">First Item</li>
    <li title="Some hover text." style="color:green">Second Item</li>
    <li><span class="code-example-third">Third</span> Item</li>
</ul>

se convierte

["ul",
    ["li", {"style": "color:red"}, "First Item"],
    ["li", {"title": "Some hover text.", "style": "color:green"}, "Second Item"],
    ["li", ["span", {"class": "code-example-third"}, "Third"], " Item" ]
]

Todavía no lo he usado, pero estoy pensando en usarlo para un proyecto en el que deseo tomar cualquier página web y volver a crear una plantilla con mustache.js.