如何克隆DOM节点并插入iframe，同时保留所有子元素的滚动值

我需要克隆某个DOM节点（当前使用cloneNode方法），并将克隆节点插入iframe时保留原节点内所有元素的滚动值。目前我的实现思路是：遍历原节点整个DOM树，通过scrollTop和scrollLeft获取每个元素的滚动位置并保存；完成克隆并将节点插入iframe后，再次遍历新DOM树重新设置滚动值。

想请教是否存在更优方案——核心目标是无需两次遍历整个DOM树。

补充背景：我正在维护react-to-print工具，尝试解决相关Bug。

可以通过只遍历有非零滚动值的元素+基于DOM结构路径定位克隆元素的方式，把两次全量遍历简化为一次针对性遍历，大幅减少不必要的DOM操作：

1. 先完成克隆节点的创建与插入：

const clonedNode = originalNode.cloneNode(true);
iframe.contentDocument.body.appendChild(clonedNode);

2. 使用TreeWalker遍历原节点中仅存在非零滚动值的元素，避免遍历整个DOM树：

const treeWalker = document.createTreeWalker(originalNode, NodeFilter.SHOW_ELEMENT, {
  acceptNode: (node) => {
    // 只处理有滚动偏移的元素
    return node.scrollTop > 0 || node.scrollLeft > 0 
      ? NodeFilter.FILTER_ACCEPT 
      : NodeFilter.FILTER_SKIP;
  }
});

3. 遍历过程中，通过记录原元素相对于根节点的DOM路径（子节点索引序列），直接定位到克隆节点中对应的元素，同步设置滚动值：

let currentNode;
while (currentNode = treeWalker.nextNode()) {
  // 生成原元素到根节点的路径
  const path = [];
  let temp = currentNode;
  while (temp !== originalNode) {
    const parent = temp.parentNode;
    path.unshift(Array.from(parent.children).indexOf(temp));
    temp = parent;
  }

  // 根据路径找到克隆节点中的对应元素
  let clonedElement = clonedNode;
  path.forEach(index => {
    clonedElement = clonedElement.children[index];
  });

  // 同步滚动值
  clonedElement.scrollTop = currentNode.scrollTop;
  clonedElement.scrollLeft = currentNode.scrollLeft;
}

方案优势 #

• 避免了两次全量DOM遍历，仅处理实际有滚动偏移的元素，性能开销更低；
• 无需额外存储映射表或元数据属性，通过DOM结构路径定位，逻辑更简洁；
• 克隆节点插入iframe后再设置滚动值，确保元素已处于文档流中，滚动值设置有效。

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