如何在 Javascript 中将当前的 DOM 树作为字符串获取？答案

【问题标题】：How to get the current DOM tree as string in Javascript?如何在 Javascript 中将当前的 DOM 树作为字符串获取？
【发布时间】：2018-04-09 21:33:46
【问题描述】：

我正在寻找 innerHTML 的等效项（不反映页面加载后对 DOM 树的更改），其中包括页面加载后对 DOM 树的更改。我了解到有 IDL 和非 IDL 属性分别反映页面加载和更改的初始状态。

如果没有标准的 Javascript 函数，我也会接受对现有库函数的引用（它基本上是对 DOM 树打印元素名称、所有属性和文本内容的深度优先迭代，所以我确定它已经存在）。

我检查的问题没有提供问题的答案：

【问题讨论】：

抓取HTML状态的目的是什么？也许有比现有解决方案更好的解决方案。
@epascarello 在使用 phantomjs 或 Chrome 等无头浏览器进行功能测试期间调查无头 CI 服务中的 DOM 树。
似乎该测试也将是缺陷，因为我怀疑属性和内容的顺序是否可以信任。最好编写测试来检查确切的内容，而不是比较字符串。

标签： javascript html dom innerhtml

【解决方案1】：

我认为你的前提是错误的 - innerHTML 确实反映了页面加载后对 DOM 的更改，但如果你将它返回的内容保存在另一个变量中，则该新变量不会自动保持不变迄今为止，如此处所示：

var innerHTML = document.getElementById("container").innerHTML;
document.getElementById("test").addEventListener("click", function() {
    var newContent = document.createElement("div");
    newContent.innerHTML="HELLO"
    document.getElementById("container").appendChild(newContent);
    console.log({
        current: document.getElementById("container").innerHTML,
        original: innerHTML
    })
});

<div id="container">
    <button id="test">Click me to append a div and log the containers innerHTML</button>
</div>

【讨论】：

而且我相信您不理解 OP 的要求是错误的。属性不会更新，这就是我认为 OP 所追求的。
感谢您的回答。这会使我的问题与我提到的第二个问题重复。

【解决方案2】：

我相信您只需将 document.body.outerHTML 字符串化即可。

试试这个：

 document.body.style.backgroundColor = "red";
 alert(JSON.stringify(document.body.outerHTML));

您应该看到 backgroundColor 已设置（这意味着您看到的是修改后的 dom）。

如果您要更改输入值，并且希望在 dom 中看到它，则必须以两种方式设置它。首先，.value 属性实际上设置了表单提交时读取的字段的值。然后你可以做一个 setAttribute("value", "...") 在 stringify 中设置它。

document.getElementById("changeDom").addEventListener("click", function() {
document.getElementById("try").value="xyz"; // sets visible value

document.getElementById("try").setAttribute("value","xyz"); // sets dom value
});
document.getElementById("showDom").addEventListener("click", function() {
alert(JSON.stringify(document.body.outerHTML));
});

<input type="text" id="try"/>
<button id="changeDom">Change</button>
<button id="showDom">Show</button>

如果您不想设置两次，您可以添加一个事件侦听器，以便在值更改时为您执行 setAttribute。 JQuery 使这很容易。它看起来像这样（伪代码警告）：

$(document).on("keypress", "#try", function() { $(this).attr("value",$(this).val()); })'

【讨论】：