使用 replacechild(newnode, oldnode) 方法可以替换指定子节点，核心在于获取目标节点的引用并传入新节点。该方法会返回被替换的旧节点，同时自动从父节点移除旧节点并将新节点插入到原位置。
如何替换第一个子节点
通过 firstChild 属性可以直接定位到第一个子节点，将其作为第二个参数传入 replaceChild 即可实现替换。以下代码演示了将列表中的第一项替换为新项的过程及结果。
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
// 替换第一个子节点
const removed = list.replaceChild(newItem, list.firstChild);
console.log(removed.textContent); // "Item 1"
console.log(list.children[0].textContent); // "New Item"
</script>如何替换特定索引的子节点
当需要替换非首尾的节点时，可以通过 children 集合或 childNodes 数组获取对应索引的节点引用。这种方法适用于已知节点位置但无法直接通过属性命名的场景。
立即学习“Java免费学习笔记（深入）”；
<div id="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const container = document.getElementById('container');
const newP = document.createElement('p');
newP.textContent = 'Replaced Paragraph';
// 替换第二个子节点（索引为1）
const target = container.children[1];
if (target) {
const removed = container.replaceChild(newP, target);
console.log(removed.textContent); // "Paragraph 2"
}
</script>替换操作失败的条件是什么
如果传入的 oldNode 不是当前父节点的直接子节点，或者 newNode 与 oldNode 是同一个对象，replaceChild 会抛出 NotFoundError 异常。此外，若 newNode 已存在于 DOM 树中，它会被自动从原位置移除并插入到新位置，不会报错。
