replaceChild 替换节点时，新节点须为有效 Node 对象，旧节点须为父节点的直接子节点，且必须由父节点调用；旧节点被替换后仍可引用并重用。
用 replaceChild 替换 DOM 节点时，核心是：**新节点必须是有效节点对象，旧节点必须是父节点的直接子节点，且调用者必须是该父节点本身**。旧节点被替换后仍保留在内存中，只要还有变量引用它，就能继续操作或重新插入。
replaceChild 的基本用法和限制
replaceChild(newNode, oldNode) 是父节点的方法，不是旧节点或新节点的方法。它要求：
- newNode 必须是已创建的、有效的 Node（如 Element、Text 等），不能是字符串或 null；
- oldNode 必须是当前父节点的直接子节点，否则抛出 DOMException；
- 返回值是被替换掉的 oldNode（即原节点对象），可用于后续处理；
- 如果
newNode已存在于文档中，它会先从原位置移除，再插入到新位置。
如何安全替换并保留旧节点引用
旧节点不会自动销毁，只要代码中还持有它的引用，就能继续使用。常见做法是把 replaceChild 的返回值赋给变量：
const parent = document.getElementById('container');
const oldDiv = parent.querySelector('.old');
const newDiv = document.createElement('div');
newDiv.className = 'new';
newDiv.textContent = '我是新节点';
// 执行替换，并捕获被替换的旧节点
const removedNode = parent.replaceChild(newDiv, oldDiv);
// 此时 oldDiv 和 removedNode 指向同一个节点
console.log(removedNode === oldDiv); // true
console.log(removedNode.parentNode); // null（已脱离 DOM）
替换后对旧节点的常见处理方式
旧节点虽已脱离 DOM，但仍是可用的 Node 对象。你可以：
立即学习“Java免费学习笔记（深入）”；
- 重用它：稍后再次 append 或 insert 到其他位置，甚至插回原父节点；
-
修改后再插入：比如改 class、添加内容，再调用
appendChild； - 彻底清理：手动移除其事件监听器（如果有的话），避免内存泄漏；
- 仅读取信息：例如获取旧节点的 data 属性、文本内容，用于日志或状态比对。
容易出错的典型场景
以下情况会导致 replaceChild 失败或行为异常：
- 误把字符串当 newNode：
parent.replaceChild('<div>xxx</div>', oldNode)—— 会报错，需先用document.createElement或innerHTML+firstChild创建节点； - oldNode 不属于 parent：
someOtherParent.replaceChild(newNode, oldNode)—— 即使 oldNode 存在，但不在调用者的子节点列表里，会报错； - 重复替换同一 oldNode：第二次调用时 oldNode 已无父节点，
oldNode.parentNode为 null，导致失败； - 忽略事件监听器残留：若旧节点绑定了事件，又没手动
removeEventListener，重用时可能触发多次回调。
