如何无需遍历克隆元素，获取对应原元素数组的克隆元素数组？

原HTML结构 #

<div id="id1"><p id="p1">1</p><p id="p2">2</p></div>

原JavaScript代码片段 #

const el = document.getElementById("id1");
const arr = [];
if(el)
for (const element of el.getElementsByTagName("*")) {
  if(element.textContent === "1") arr.push(element)
}
const cloneEl = el?.cloneNode(true);
function arrCloneWithRelationToCloneEl(arr , cloneEl){
...
return arrClone;
}

问题需求 #

已从原DOM元素el中筛选出textContent为“1”的元素存入数组arr，克隆el得到cloneEl后，需要实现arrCloneWithRelationToCloneEl函数，无需遍历cloneEl的节点，获取arr中元素对应的克隆元素组成的数组（预期结果为cloneEl中的p#p1）。

可行解决方案 #

方案一：利用元素ID直接匹配 #

如果原节点带有唯一ID（如示例中的p#p1），这是最高效的方式。因为cloneNode(true)会完整复制元素的ID属性，直接在克隆元素内通过ID查找即可：

function arrCloneWithRelationToCloneEl(arr, cloneEl) {
  return arr.map(item => {
    if (!item.id) return null;
    return cloneEl.querySelector(`#${item.id}`);
  }).filter(Boolean);
}

• 优势：代码极简，完全无需遍历克隆节点
• 局限性：依赖元素必须拥有唯一ID，无ID节点无法使用

方案二：预存节点相对路径映射 #

可以在筛选原节点时，同步记录节点相对于el的层级路径，克隆后直接按路径导航到目标节点，避免遍历克隆DOM：

// 筛选原节点时同步记录路径
const arrWithPath = [];
if (el) {
  for (const element of el.getElementsByTagName("*")) {
    if (element.textContent === "1") {
      const path = [];
      let current = element;
      // 生成从el到当前节点的层级索引路径
      while (current !== el) {
        const parent = current.parentNode;
        path.unshift([...parent.children].indexOf(current));
        current = parent;
      }
      arrWithPath.push({ element, path });
    }
  }
}

const cloneEl = el?.cloneNode(true);

function arrCloneWithRelationToCloneEl(arrWithPath, cloneEl) {
  return arrWithPath.map(({ path }) => {
    let current = cloneEl;
    // 按预存路径直接定位克隆节点
    for (const index of path) {
      current = current.children[index];
      if (!current) break;
    }
    return current;
  }).filter(Boolean);
}

• 优势：不依赖ID，适用于所有层级化DOM结构
• 注意：路径仅需在筛选原节点时生成一次，后续克隆可直接复用

方案三：临时标记关联法 #

克隆前给目标节点添加唯一临时标记，克隆后通过标记匹配对应节点，使用后清理标记避免DOM污染：

const arr = [];
if (el) {
  for (const element of el.getElementsByTagName("*")) {
    if (element.textContent === "1") {
      arr.push(element);
      // 添加唯一临时标记
      element.dataset.tempId = Math.random().toString(36).slice(2);
    }
  }
}

const cloneEl = el?.cloneNode(true);

function arrCloneWithRelationToCloneEl(arr, cloneEl) {
  return arr.map(item => {
    const tempId = item.dataset.tempId;
    if (!tempId) return null;
    // 清理原节点临时标记
    delete item.dataset.tempId;
    // 查找克隆节点并清理标记
    const cloneItem = cloneEl.querySelector(`[data-temp-id="${tempId}"]`);
    if (cloneItem) delete cloneItem.dataset.tempId;
    return cloneItem;
  }).filter(Boolean);
}

• 优势：无需预存路径，也不强制依赖ID
• 注意：必须清理临时标记，避免DOM属性残留

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