如何检测表单提交前后值变化？页面加载到保存的变动是否有对应DOM属性？

表单提交前后数值变化检测 #

可以直接用表单控件自带的原生DOM属性完成对比：

• 针对文本输入框、文本域：对比value（当前值）和defaultValue（页面加载时的初始值）即可判断是否发生修改
• 针对单选框、复选框：对比checked（当前选中状态）和defaultChecked（初始选中状态）即可
• 针对下拉选择框：遍历option节点对比selected（当前选中状态）和defaultSelected（初始选中状态）即可

示例代码：

// 检测单个输入框是否修改
const phoneInput = document.querySelector('#phone');
const isPhoneModified = phoneInput.value !== phoneInput.defaultValue;

// 检测整个表单是否有修改
const form = document.querySelector('#submitForm');
const isFormModified = Array.from(form.elements).some(el => {
  if (['INPUT', 'TEXTAREA'].includes(el.tagName) && !['checkbox', 'radio'].includes(el.type)) return el.value !== el.defaultValue;
  if (el.tagName === 'INPUT' && ['checkbox', 'radio'].includes(el.type)) return el.checked !== el.defaultChecked;
  if (el.tagName === 'SELECT') return Array.from(el.options).some(opt => opt.selected !== opt.defaultSelected);
  return false;
});

页面全流程任意变动检测 #

没有单个DOM属性可以直接实现全页面变动检测，但可以用浏览器原生提供的MutationObserverAPI实现，它可以监听所有DOM层面的变动，包括节点增删、属性修改、文本内容变化、子节点递归变动，完全覆盖从页面加载到保存的全流程监听需求。

基础使用示例：

window.addEventListener('load', () => {
  // 监听配置，开启所有常用变动类型的监听
  const observeOptions = {
    attributes: true, // 监听属性变动
    childList: true, // 监听子节点增删
    subtree: true, // 递归监听所有后代节点
    characterData: true // 监听文本内容变动
  };

  // 变动触发时的回调函数
  const handleMutation = (mutations) => {
    mutations.forEach(mutation => {
      // 这里可以自定义变动处理逻辑，比如记录变动内容、触发告警等
      console.log(`检测到${mutation.type}类型变动`, mutation);
    });
  };

  // 实例化观察者并开始监听整个页面根节点
  const pageObserver = new MutationObserver(handleMutation);
  pageObserver.observe(document.documentElement, observeOptions);

  // 页面保存时如果不需要继续监听可以调用销毁方法
  // pageObserver.disconnect();
});

如果页面结构比较简单，也可以在页面加载完成时存储一份页面快照const initialHtml = document.documentElement.outerHTML，保存页面对比当前的outerHTML和初始快照即可得到全量差异。

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