有没有办法 JSON.stringify 一个 HTML dom 对象？ [JavaScript]答案

【问题标题】：Is there a way to JSON.stringify an HTML dom object? [JavaScript]有没有办法 JSON.stringify 一个 HTML dom 对象？ [JavaScript]
【发布时间】：2015-11-29 09:21:07
【问题描述】：

我正在尝试加载外部 html 文件并对正文中的内容进行字符串化，但似乎无法这样做，否则会产生不希望的结果。有没有办法做到这一点？

var xhr = new XMLHttpRequest();

function loadFile(){
    xhr.open("GET", 'index.html');
    xhr.responseType = "document";
    xhr.send();
}

xhr.onload = function(data) {
    myData = data;
    myString = JSON.stringify(myData.srcElement.responseXML.body.children);
        console.log(myString)
       //logs: {"0":{},"length":1}

    }

loadFile();

但我需要它加载的是实际的 div 内容，例如：

//log: '<div id ='mydiv'>...</div>

我做错了什么？

【问题讨论】：

您必须将您想要的内容提取到您自己的 JavaScript 数据结构中，然后将其字符串化。内置的序列化程序不能直接在 DOM 上工作。
使用 document.body.innerHTML
如果你想要的只是实际的div内容，那么你不需要JSON.stringify它。改为这样做：myString = myData.srcElement.responseXML.body.children;
@raghavendra 我需要将值创建为字符串，以便我可以替换一些值或 id、属性、文本等。

标签： javascript html json xmlhttprequest stringify

【解决方案1】：

我可以通过将响应类型更改为“DOMString”来解决这个问题：

function buildAd(file){
    xhr.open("GET", file);
    xhr.responseType = "DOMString";
    xhr.send();
}

【讨论】：

跨浏览器兼容？

【解决方案2】：

你的问题不是很清楚，但我想试一试。从那里获得灵感：https://stackoverflow.com/a/7539198/1636522。演示：http://jsfiddle.net/wared/fezc6tnt/.

function string2dom (html) {
    var iframe, doc;
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    doc = iframe.contentDocument || iframe.contentWindow.document;
    iframe.parentNode.removeChild(iframe);
    doc.open();
    doc.write(html);
    doc.close();
    return doc;
}

var dom = string2dom(''
+ '<html>'
+   '<head>'
+     '<title>test</title>'
+   '</head>'
+   '<body>'
+     '<div id="test">allo la <b>terre</b></div>'
+   '</body>'
+ '</html>'
);

document.body.innerHTML = (
    dom.getElementById('test').innerHTML
);

【讨论】：