Question

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

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

问题我查了一下，但没有提供问题的答案：

Answer 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>

Answer 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()); })'

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

2 个答案: