MutationRecord的addedNodes与removedNodes属性是动态还是静态NodeList？

结论 #

MutationRecord.addedNodes 和 MutationRecord.removedNodes 返回的是静态（static）NodeList——它们是DOM突变发生时刻的节点快照，后续DOM变化不会影响其内容或长度。此外，确实没有直接判断NodeList是动态还是静态的内置属性，只能通过行为验证。

验证代码示例 #

验证addedNodes的静态特性

// 创建观察目标并加入页面
const target = document.createElement('div');
document.body.appendChild(target);

const observer = new MutationObserver((records) => {
  const addedNodes = records[0].addedNodes;
  const initialLen = addedNodes.length;
  console.log('初始addedNodes长度:', initialLen); // 输出1

  // 删除刚添加的节点，修改原DOM
  target.removeChild(addedNodes[0]);
  // 检查静态NodeList是否受影响
  console.log('修改后addedNodes长度:', addedNodes.length); // 仍输出1，证明是静态

  observer.disconnect();
});

// 配置观察子节点变化
observer.observe(target, { childList: true });

// 触发添加节点的突变
target.appendChild(document.createElement('p'));

验证removedNodes的静态特性

// 初始化目标节点和子节点
const target = document.createElement('div');
const child = document.createElement('p');
target.appendChild(child);
document.body.appendChild(target);

const observer = new MutationObserver((records) => {
  const removedNodes = records[0].removedNodes;
  const initialLen = removedNodes.length;
  console.log('初始removedNodes长度:', initialLen); // 输出1

  // 将移除的节点重新加回原目标，修改DOM
  target.appendChild(removedNodes[0]);
  // 检查静态NodeList是否受影响
  console.log('修改后removedNodes长度:', removedNodes.length); // 仍输出1，证明是静态

  observer.disconnect();
});

// 配置观察子节点变化
observer.observe(target, { childList: true });

// 触发删除节点的突变
target.removeChild(child);

验证逻辑 #

动态NodeList（比如element.childNodes）会实时同步DOM的变化，而静态NodeList是固定快照。上面的代码通过修改原DOM后，对比NodeList的长度是否变化，就能判断其类型：如果长度不变，说明是静态快照；如果长度随DOM变化，则是动态NodeList。

内容的提问来源于stack exchange，提问作者yg-i