Comment sérialiser un nœud DOM en JSON?

Question

Je veux sérialiser des nœuds du DOM ou même des window JSON.

Par exemple:

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

Le problème est JSON ne prend pas en charge les références circulaires par défaut.

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

window et les nœuds DOM avez beaucoup d'entre eux. window === window.window ainsi que document.body.ownerDocument === document.

Aussi, JSON.stringify n'est pas sérialiser des fonctions, donc ce n'est pas ce que je cherche.

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":"#"}}

Bon, n'est-ce pas?

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

Bien pas assez bon pour moi.

Pourquoi?

Je suis en train de faire des DOM tableau de compatibilité pour les différents navigateurs. Par exemple, Webkit prend en charge l'espace réservé de l'attribut et de l'Opéra n'est pas, c'est à dire 8 supporte localStorage et IE 7 ne fonctionne pas, et ainsi de suite.

Je ne veux pas faire des milliers de cas de test. Je veux faire de façon générique pour toutes les tester.

Mise À Jour Juin 2013

J'ai fait un prototype NV/dom-dom-dom.com.

Answer 1

http://jsonml.org/ prend une photo d'une grammaire pour convertir des éléments DOM XHTML en JSON. Un exemple:

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

devient

 ["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" ]
]
 

Je ne l'ai pas encore utilisé, mais je pense à l'utiliser pour un projet où je veux prendre une page Web et la reformater à l'aide de moustache.js.

Answer 2

Vous pourriez potentiellement traverser le DOM et de générer un pur JS objet de représentation et puis les nourrir à la DojoX sérialiseur. Mais, vous devez d'abord décider comment vous avez l'intention de la carte des éléments du DOM, leurs attributs et les nœuds de texte, sans ambiguïté, à des objets JS. Par exemple, comment vous représentez la suite?

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

De cette façon?

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

Je pense que la raison DojoX n'est pas immédiatement soutien DOM sérialisation pourrait être exactement cela: La nécessité de choisir d'abord un schéma pour la cartographie des DOM en JS objets. Est-il un schéma standard, qui pourrait être utilisée? Votre JS objet imiter une arborescence DOM, sans fonctions? Je pense que vous devez d'abord définir ce que votre attente est de "sérialisation DOM JSON".

Answer 3

J'ai trouvé cela et cela a très bien fonctionné pour moi lorsque j'essayais de convertir une chaîne XML en JSON.

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

Peut-être que cela vous aidera.

Answer 4

Il semble que vous deviez l'écrire vous-même. Les données sérialisées JSON peuvent également ne pas être le choix parfait pour votre tâche (tableau de compatibilité DOM). Vous devez probablement itérer les objets par vous-même, vérifier les types d'attributs, 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( ... ) { ... }
}
...