将节点替换为自身克隆后，如何获取新的节点？

有两种更优的方案可以直接获取替换后的新元素，无需预先设置ID查询：

1. 预先保存克隆元素（最推荐） #

先把克隆好的元素存入变量，再执行替换操作，变量会直接指向页面中原位置的新元素，后续交互直接使用该变量即可：

// 克隆并保存新元素
const newNode = node.cloneNode(true);
// 用新元素替换旧元素
node.replaceWith(newNode);
// 直接通过newNode与新元素交互，比如绑定新事件
newNode.addEventListener('click', () => {
  console.log('点击了新元素');
});

这种方式逻辑清晰，无需额外DOM查询，效率最高。

2. 通过旧元素的关联节点获取新元素 #

如果不想提前保存克隆体，也可以利用DOM节点的父子/兄弟关系定位新元素——旧元素被替换后，新元素会占据它原本的位置：

node.replaceWith(node.cloneNode(true));
// 通过父元素的子节点索引定位新元素
const oldIndex = Array.from(node.parentNode.children).indexOf(node);
const newNode = node.parentNode.children[oldIndex];

不过这种方式依赖DOM结构的稳定性，不如第一种方案可靠，优先推荐第一种。

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