即使有循环引用，如何将DOM节点序列化为JSON？

Question

我想将DOM节点甚至整个序列化为windowJSON。例如： >> 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问题是JSON默认情况下不支持循环引用。var obj = {}obj.me = objJSON.stringify(obj) // TypeError: Converting circular structure to JSONwindow和DOM节点有很多。window === window.window一如既往document.body.ownerDocument === document。另外，JSON.stringify不会序列化函数，所以这不是我想要的。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":"#"}}好，不是吗？ dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes对我来说还不够好。为什么？我正在尝试为不同的浏览器创建DOM兼容性表。例如，Webkit支持占位符属性，Opera不支持，IE 8不支持localStorageIE 7，等等。我不想做成千上万的测试用例。我想以通用的方式测试它们。

Answer 1

您可能会遍历DOM并为其生成纯JS对象表示，然后将其提供给DojoX序列化器。但是，您必须首先决定如何计划将DOM元素，它们的属性和文本节点毫无歧义地映射到JS对象。例如，您将如何表示以下内容？

<parent attr1="val1">

  Some text

  <child attr2="val2"><grandchild/></child>

</parent>

像这样？

{

    tag: "parent",

    attributes: [

        {

            name: "attr1",

            value: "val1"

        }

    ],

    children: [

        "Some text",

        {

            tag: "child",

            attributes: [

                {

                    name: "attr2",

                    value: "val2"

                }

            ],

            children: [

                { tag: "grandchild" }

            ]

         }

     ]

 }

我认为DojoX不立即支持DOM序列化的原因可能完全是这样的：需要首先选择一种将DOM映射到JS对象的方案。有没有可以采用的标准方案？您的JS对象会简单地模仿没有任何功能的DOM树吗？我认为您必须首先定义对“将DOM序列化为JSON”的期望。

Answer 2

看来您必须自己编写。JSON序列化数据也可能不是您的任务（DOM兼容性表）的理想选择。您可能必须自己迭代对象，检查属性的类型等等。

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( ... ) { ... }

}

...