本文介绍两种基于 JavaScript 循环（forEach 与 for）批量将一组可编辑区块（）的文本内容复制到对应目标区块的方法，支持按 DOM 顺序索引匹配或通过 data-target 属性精准映射，代码简洁、可维护性强。

本文介绍两种基于 javascript 循环（`foreach` 与 `for`）批量将一组可编辑区块（`

`）的文本内容复制到对应目标区块的方法，支持按 dom 顺序索引匹配或通过 `data-target` 属性精准映射，代码简洁、可维护性强。

在实际前端开发中，常需实现“一键同步”多个表单区域或内容区块的操作。例如，将左侧编辑区的 4 个 <blockquote contenteditable="true"></blockquote> 中的文本，分别复制到右侧对应位置的空白区块中。若沿用原始写法（如为每个 a1→b1, a2→b2 单独调用 getElementById），不仅冗余低效，且难以扩展。推荐采用结构化、可复用的循环方案。

✅ 方案一：基于容器分组 + 索引映射（推荐）

此方法利用 querySelectorAll() 获取源与目标区块集合，再通过 forEach() 配合索引 i 实现一一对应赋值。要求两组元素数量一致、顺序相同，HTML 结构清晰轻量。

<div class="source">
  first
  <blockquote contenteditable="true"><p>text1</p></blockquote>
  <blockquote contenteditable="true"><p>text2</p></blockquote>
  <blockquote contenteditable="true"><p>text3</p></blockquote>
  <blockquote contenteditable="true"><p>text4</p></blockquote>
</div>

<div class="target">
  second
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
</div>

<button type="button" id="copy">Submit</button>

document.querySelector('#copy').addEventListener('click', () => {
  const sources = document.querySelectorAll('.source > blockquote');
  const targets = document.querySelectorAll('.target > blockquote');

  sources.forEach((src, i) => {
    if (targets[i]) { // 安全检查：避免越界
      targets[i].innerText = src.innerText;
    }
  });
});

✅ 优势：无需 ID、无硬编码，HTML 干净；✅ 注意：务必确保 .source 与 .target 下 blockquote 数量一致，否则可能跳过或报错。

✅ 方案二：基于 data-target 属性精准绑定

当源与目标结构不规则（如嵌套层级不同、数量不等或需动态重排）时，可为每个源元素添加 data-target 属性，明确指定目标选择器（如 #t1、.output:nth-child(2)），提升灵活性与健壮性。

<div class="source">
  first
  <blockquote contenteditable="true" data-target="#t1"><p>text1</p></blockquote>
  <blockquote contenteditable="true" data-target="#t2"><p>text2</p></blockquote>
  <blockquote contenteditable="true" data-target="#t3"><p>text3</p></blockquote>
  <blockquote contenteditable="true" data-target="#t4"><p>text4</p></blockquote>
</div>

<div class="target">
  second
  <blockquote contenteditable="true" id="t1"><p></p></blockquote>
  <blockquote contenteditable="true" id="t2"><p></p></blockquote>
  <blockquote contenteditable="true" id="t3"><p></p></blockquote>
  <blockquote contenteditable="true" id="t4"><p></p></blockquote>
</div>

document.querySelector('#copy').addEventListener('click', () => {
  document.querySelectorAll('.source > blockquote').forEach(src => {
    const targetSelector = src.dataset.target;
    const targetEl = document.querySelector(targetSelector);
    if (targetEl) {
      targetEl.innerText = src.innerText;
    } else {
      console.warn(`Target element not found for selector: ${targetSelector}`);
    }
  });
});

✅ 优势：解耦结构、支持任意选择器、易于后期维护；⚠️ 注意：需确保 data-target 值合法且对应元素存在，建议加入 if (targetEl) 安全判断。

? 总结与建议

• 优先选用方案一：适用于结构规整、批量操作场景，性能优、语义清晰；
• 选用方案二：适用于复杂 DOM 关系、需灵活映射或未来可能调整布局的项目；
• 通用最佳实践：
  • 始终校验目标元素是否存在（避免 Cannot set property 'innerText' of null）；
  • 使用 addEventListener 替代内联 onclick，提升可测试性与关注点分离；
  • 若需保留 HTML 标签结构（如 <p></p>），请改用 innerHTML 替代 innerText，但需注意 XSS 风险；
  • 如需支持旧版浏览器（IE），可将 forEach 替换为传统 for (let i = 0; i 循环。

通过合理运用现代 DOM API 与语义化 HTML，一行逻辑即可驱动多组数据同步——简洁，即强大。