我正在try 使用document.cloneNode(true)来克隆/复制包含表单的现有html页面，但这不能捕获用户输入.
我有一个js脚本嵌入在一个html页面与表单，并试图使用document.cloneNode(true)来克隆该页面，并将其保存在一个s3桶.当用户单击Submit按钮时，js函数运行以克隆html页面.
问题是在克隆HTML页面时，cloneNode()不包括用户输入.我判断了docs-https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode，但没有找到对此用例的处理.
这是cloneNode()的预期行为吗？如果是这样的话，我如何才能达到让用户像这样输入的要求-
<input type='text' value='John Doe'>
而不是
<input type='text'>
我必须手动设置每个输入字段中的值吗？可以有不同类型的输入，如复选框，日期等，所以我认为应该有一个更好的方法来实现这一点.
input元素的值不会反映在其value属性(或任何其他属性)中，尽管其名称如此.value属性提供输入的default value，而不是其当前值，即使HTMLInputElement实例的value property提供的是当前值.这是DOM令人困惑的事情之一.以下是细目:
| Item | Attribute | Property |
|---|---|---|
| Default value | value |
defaultValue |
| Current value | none | value |
如果您想要一个能够捕获用户在input个元素上的当前输入文本(以及他们在select个元素上的当前选定项)的HTML字符串，则必须自己实现该功能，可能需要使用data-*个属性.
下面是input个元素的简单示例:
// Respond to the `input` event by updating an attribute on the
// input element
document.addEventListener("input", ({target}) => {
if (target instanceof HTMLInputElement) {
target.setAttribute("data-current-value", target.value);
}
});
// Hook up the button to show the HTML:
document.querySelector("[value='Show HTML']").addEventListener("click", () => {
for (const input of document.querySelectorAll("input[type=text]")) {
console.log(input.outerHTML);
}
});A: <input type="text" name="a">
<br>
B: <input type="text" name="b">
<br>
<div><input type="button" value="Show HTML"></div>在该示例中，我将在值更改时获取这些值，但您也可以在克隆文档之前执行此操作.