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

我正在寻找

innerHTML

（不反映页面加载后对DOM树的更改）的等价物，其中包括页面加载后对DOM树的更改。我了解到IDL和非IDL属性分别反映页面加载和更改的初始状态

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

我勾选的问题没有提供问题的答案：

---

我认为您的前提是错误的-

innerHTML

确实反映了页面加载后对DOM的更改，但如果您将其返回的内容保存在另一个变量中，则新变量将不会自动保持最新，如下所示：

var innerHTML=document.getElementById（“容器”）.innerHTML；
document.getElementById（“测试”）.addEventListener（“单击”，函数）（）{
var newContent=document.createElement（“div”）；
newContent.innerHTML=“你好”
document.getElementById（“容器”）.appendChild（newContent）；
console.log({
当前：document.getElementById（“容器”）.innerHTML，
原文：innerHTML
})
});

单击我添加一个div并在HTML中记录容器
我相信您可以通过对document.body.outerHTML进行字符串化来实现这一点

试试这个：

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

您应该看到背景色已经设置好（这意味着您看到的是修改后的dom）

如果要更改输入值，并且希望在dom中看到它，则必须通过两种方式进行设置。首先，.value属性实际设置表单提交时读取的字段的值。然后，您可以执行setAttribute（“value”、“…”）以在stringify中可见地设置它


document.getElementById（“changeDom”）.addEventListener（“单击”，函数（）{
document.getElementById（“try”）.value=“xyz”//设置可见值
document.getElementById（“try”）.setAttribute（“value”，“xyz”）；//设置dom值
});
document.getElementById（“showDom”）.addEventListener（“单击”，函数（）{
警报（JSON.stringify（document.body.outerHTML））；
});

改变
Show
，我相信你不理解OP的要求是错误的。属性不更新，这就是我认为OP所追求的。谢谢你的回答。这会使我的问题与我提到的第二个问题重复。获取HTML状态的目的是什么？也许有一个比现有的更好的解决方案。@epascarello在使用phantomjs或Chrome等无头浏览器进行功能测试时，调查了无头CI服务中的DOM树。似乎该测试也存在缺陷，因为我怀疑属性和内容的顺序是否可信。与其比较字符串，不如编写测试来检查确切的内容。@epascarello我不是在测试断言中使用字符串（这有点疯狂），而是在没有图像的情况下对页面进行概述。