document.cloneNode(true)克隆页面丢失用户输入：咨询原因与解决办法

1. cloneNode()的行为是否符合预期？ #

是，这是完全符合标准的行为。

DOM元素的用户输入值属于元素的动态状态（对应DOM对象的property），而cloneNode()默认只会克隆元素在HTML中定义的初始属性（attribute），不会同步这些动态更新的状态。比如文本输入框的value attribute是页面加载时的初始值，用户输入后改变的是DOM对象的value property，而非HTML属性，所以克隆后的节点自然不会包含用户输入的内容。

2. 如何让克隆结果包含用户输入？ #

不需要手动逐个设置，我们可以批量将所有表单元素的动态值同步到对应的HTML属性上，再执行克隆操作。以下是通用的实现方案：

步骤1：编写同步表单值到属性的函数 #

这个函数可以处理常见的表单控件类型：

function syncFormValuesToAttributes() {
  // 遍历页面中所有表单元素
  document.querySelectorAll('form').forEach(form => {
    Array.from(form.elements).forEach(elem => {
      switch (elem.type) {
        // 文本、数字、日期等输入类型
        case 'text':
        case 'password':
        case 'email':
        case 'number':
        case 'date':
        case 'tel':
        case 'url':
          elem.setAttribute('value', elem.value);
          break;
        // 多行文本框
        case 'textarea':
          elem.textContent = elem.value;
          break;
        // 复选框、单选框
        case 'checkbox':
        case 'radio':
          elem.checked ? elem.setAttribute('checked', 'checked') : elem.removeAttribute('checked');
          break;
        // 下拉选择框（单选）
        case 'select-one':
          Array.from(elem.options).forEach(option => {
            option.selected ? option.setAttribute('selected', 'selected') : option.removeAttribute('selected');
          });
          break;
        // 下拉选择框（多选）
        case 'select-multiple':
          Array.from(elem.options).forEach(option => {
            option.selected ? option.setAttribute('selected', 'selected') : option.removeAttribute('selected');
          });
          break;
        // 文件输入框无法同步（出于安全限制），若需处理可单独记录文件名，但无法获取文件内容
      }
    });
  });
}

步骤2：同步值后再克隆并序列化 #

// 先同步所有表单的动态值到HTML属性
syncFormValuesToAttributes();

// 克隆整个文档
const clonedDocument = document.documentElement.cloneNode(true);

// 序列化为字符串
const serializedHtml = new XMLSerializer().serializeToString(clonedDocument);

// 之后即可将serializedHtml上传到S3存储桶

这样处理后，克隆并序列化的HTML字符串就会包含用户输入的内容，比如用户输入了"John Doe"的文本框会被序列化为：

<input type='text' value='John Doe'>

内容的提问来源于stack exchange，提问作者Subham