如何通过innerHTML获取含input实时值的可编辑div完整HTML内容

innerHTML读取的是HTML标签上写死的初始属性值，用户修改input输入内容时，更新的是DOM节点的运行时属性，二者不会自动同步，所以直接读取永远只能拿到input初始设置的value值，拿不到用户修改后的最新内容。

在读取容器的innerHTML前，先遍历容器内所有表单元素，把元素的实时运行时值手动同步到对应的HTML属性上，之后再读取innerHTML就能得到包含最新表单值的完整HTML字符串。

核心实现代码：

document.body.addEventListener('click', () => {
  const contentContainer = document.getElementById('content')
  // 遍历容器内所有表单元素做值同步
  contentContainer.querySelectorAll('input, textarea, select').forEach(formEl => {
    switch(formEl.tagName) {
      case 'INPUT':
        // 处理单选、复选框的选中状态
        if (['checkbox', 'radio'].includes(formEl.type)) {
          formEl.checked 
            ? formEl.setAttribute('checked', '') 
            : formEl.removeAttribute('checked')
        } else {
          // 普通输入框同步value
          formEl.setAttribute('value', formEl.value)
        }
        break
      case 'TEXTAREA':
        formEl.textContent = formEl.value
        break
      case 'SELECT':
        // 处理下拉框选中项
        formEl.querySelectorAll('option').forEach(optionEl => {
          optionEl.selected 
            ? optionEl.setAttribute('selected', '') 
            : optionEl.removeAttribute('selected')
        })
        break
    }
  })
  // 此时获取的HTML包含所有表单的最新值
  const fullHtml = contentContainer.innerHTML
  console.log(fullHtml)
})

配套测试代码：

body {
  height: 100vh;
}

<div id="content" contentEditable="true">
  I want <input type="number" value="3"> candies.
</div>

• 同步属性的操作只会影响读取到的HTML字符串结果，不会破坏contentEditable容器的原有编辑交互
• 如果容器内还有其他自定义表单组件，可以按照同样的逻辑，在读取HTML前把组件的实时状态同步到标签属性上即可

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