JavaScript如何批量操作多个DOM元素，避免重复复制粘贴相同代码

将4个字段的差异属性（字段名、input类型）抽为统一配置数组，通过循环批量执行相同的DOM操作逻辑，无需重复编写4次相似代码：

1. 首先定义字段配置映射：

const fieldConfig = [
  { key: 'taskName', inputType: 'text' },
  { key: 'startDate', inputType: 'time' },
  { key: 'endDate', inputType: 'time' },
  { key: 'status', inputType: 'text' }
]

2. 循环配置数组完成批量操作：

// task、taskID为原有逻辑的入参
fieldConfig.forEach(({ key, inputType }) => {
  // 获取对应DOM元素，不存在则跳过容错
  const targetEl = document.getElementById(`${key}_${taskID}`)
  if (!targetEl) return

  // 执行原有公共逻辑
  targetEl.innerHTML = ''
  targetEl.textContent = task[key]

  // 创建对应类型的input，其他公共属性/事件也可以在此统一添加
  const input = document.createElement('input')
  input.type = inputType
  // 若需要给input赋值可补充：input.value = inputType === 'time' ? formatDateToTime(task[key]) : task[key]

  // 插入input到目标元素（原有逻辑未写插入操作，需要时开启即可）
  targetEl.appendChild(input)
})

该方案可维护性极强，后续需要新增处理字段时，仅需在fieldConfig数组中新增对应配置项即可，不需要修改核心处理逻辑。如果有通用的input属性设置、事件监听需求，也可以在循环中统一添加，无需逐个修改。

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