How to serialize DOM node to JSON even if there are circular references? How to serialize DOM node to JSON even if there are circular references? javascript javascript

How to serialize DOM node to JSON even if there are circular references?


http://jsonml.org/ takes a shot at a grammar for converting XHTML DOM elements into JSON. An an example:

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

becomes

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

Haven't used it yet, but thinking about using it for a project where I want to take any web page and re-template it using mustache.js.


You could potentially traverse the DOM and generate a pure JS object representation of it and then feed it to the DojoX serializer. But, you have to first decide how you're planning to map DOM elements, their attributes and the text nodes, without ambiguity, to JS objects. For example, how would you represent the following?

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

Like this?

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

I think the a reason DojoX doesn't immediately support DOM serialization could exactly be this: The need to first pick a scheme for mapping DOM to JS objects. Is there a standard scheme that could be employed? Would your JS object simply mimic a DOM tree without any functions? I think you have to first define what your expectation is from "serializing DOM to JSON".


I found this and it worked great for me when I was trying to convert an XML string into JSON.

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

Maybe it will help.