如何 JSON.stringify dom 元素？

如 title 所示，如何对 dom 元素进行 JSON.stringify，并将 json 改回 dom 元素。

有哪位知道怎么办吗，谢谢。

Here is the code :
var container = document.querySelectorAll('.container')
 var json=JSON.stringify(container)
 {"0":{},"1":{},"2":{},"3":{}}"//result

  expected result:
  {"tagname":"div","class":"container","value":"test","childelement":[...]}

我认为最合理的方法是将要序列化的 DOM 元素的属性列入白名单：

JSON.stringify(container, ["id", "className", "tagName"])

第二个参数JSON.stringify函数允许您更改字符串化过程的行为。您可以指定一个包含要序列化的属性列表的数组。更多信息请点击这里：JSON.stringify https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

如果您也想序列化其子节点，则需要一些额外的工作。在这种情况下，您必须指定替换函数作为第二个参数JSON.stringify，而不是数组。

let whitelist = ["id", "tagName", "className", "childNodes"];
function domToObj (domEl) {
    var obj = {};
    for (let i=0; i<whitelist.length; i++) {
        if (domEl[whitelist[i]] instanceof NodeList) {
            obj[whitelist[i]] = Array.from(domEl[whitelist[i]]);
        }
        else {
            obj[whitelist[i]] = domEl[whitelist[i]];
        }
    };
    return obj;
}

JSON.stringify(container, function (name, value) {
    if (name === "") {
        return domToObj(value);
    }
    if (Array.isArray(this)) {
        if (typeof value === "object") {
            return domToObj(value);
        }
        return value;
    }
    if (whitelist.find(x => (x === name)))
        return value;
})

替换函数将托管对象转换为childNodes对于本机对象，JSON.stringify知道如何序列化。这whitelistarray 具有要序列化的属性列表。您可以在此处添加您自己的属性。

如果您想要序列化引用托管对象的其他属性（例如，firstChild).