Text节点的parentNode在Firefox中偶尔返回null的问题及解决方案求助

我完全理解你遇到的困扰——同样的代码在Chrome里全程正常，但到了Firefox就偶尔会出现文本节点的parentNode返回null的情况，哪怕用setInterval轮询也没解决，确实挺闹心的。

先帮你梳理下问题的核心原因：Firefox和Chrome对Selection（选区）的处理逻辑有细微差异，比如在一些动态编辑场景（比如快速输入、富文本框内容实时变化时），Firefox可能会让选中的文本节点短暂处于“未完全挂载到DOM树”的状态，或者选区的更新时机和Chrome不同，导致你获取parentNode时节点还没正确关联到父元素。另外你当前的代码里有个隐藏问题：把文本节点直接断言成HTMLElement，这本身就不符合节点类型规范（文本节点是Text类型，不是元素节点），虽然TypeScript能通过编译，但运行时可能会触发一些不可预期的行为。

下面给你几个针对性的解决方案，一步步来解决这个问题：

1. 先做正确的节点类型校验，用isConnected判断节点状态 #

先放弃错误的类型断言，先确认拿到的是文本节点，并且节点还挂载在DOM树中，再去获取父元素：

const target = window.getSelection()?.focusNode;
// 先校验：是文本节点 + 节点仍在DOM文档中
if (target && target.nodeType === Node.TEXT_NODE && target.isConnected) {
  const parentEl = target.parentNode as HTMLElement;
  // 再校验父元素存在且在DOM中
  if (parentEl && parentEl.isConnected) {
    // 这里执行你的DOM操作
    parentEl.append(rows);
    // ...其他业务逻辑
  }
}

这里的isConnected属性是关键，它能直接判断节点是否还属于当前DOM文档的一部分，比单纯判断parentNode更可靠。

2. 用selectionchange事件监听替代setInterval轮询 #

轮询不仅效率低，还很容易错过正确的节点状态时机。不如直接监听选区变化事件，在选区更新时再执行逻辑，这样能保证你拿到的是最新的选区状态：

document.addEventListener('selectionchange', () => {
  const target = window.getSelection()?.focusNode;
  // 前置校验不通过直接返回
  if (!target || target.nodeType !== Node.TEXT_NODE || !target.isConnected) {
    return;
  }

  const parentEl = target.parentNode as HTMLElement;
  if (!parentEl || !parentEl.isConnected) {
    return;
  }

  // 执行你的业务操作，同时简化代码逻辑
  parentEl.append(rows);
  // 替换最后一个子节点的逻辑
  const continueNode = document.createElement('span');
  continueNode.innerHTML = '<click here to continue new line>';
  const lastChild = parentEl.lastChild;
  if (lastChild) {
    parentEl.replaceChild(continueNode, lastChild);
  } else {
    parentEl.appendChild(continueNode);
  }
});

这种方式能精准捕获选区变化的时机，比轮询更高效可靠，能规避Firefox和Chrome的选区更新时机差异问题。

3. 极端场景的兜底校验：确认父元素确实包含当前文本节点 #

如果还是偶尔出现parentNode为null的情况，可能是文本节点在你获取后、操作前被意外移除了。这时候可以加一层校验，确认父元素的子节点列表里确实包含当前文本节点：

const target = window.getSelection()?.focusNode;
if (target && target.nodeType === Node.TEXT_NODE) {
  const parentEl = target.parentNode as HTMLElement;
  // 校验父元素存在，且父元素的子节点列表包含当前文本节点
  if (parentEl && Array.from(parentEl.childNodes).includes(target)) {
    // 再执行你的DOM操作
    parentEl.append(rows);
    // ...其他逻辑
  }
}

通过Array.from(parentEl.childNodes).includes(target)可以彻底确保文本节点和父元素的关联关系，避免DOM动态变化导致的引用失效。

4. 简化冗余的DOM查询逻辑 #

你当前的代码里有大量重复的父元素断言和子节点查询，不仅冗余还容易出错。把重复的查询提取成变量，能大幅降低出错概率：

const target = window.getSelection()?.focusNode;
if (!target || target.nodeType !== Node.TEXT_NODE || !target.isConnected) return;

const parentEl = target.parentNode as HTMLElement;
if (!parentEl || !parentEl.isConnected) return;

// 提取重复操作，减少冗余查询
parentEl.append(rows);
const continueNode = document.createElement('span');
continueNode.innerHTML = '<click here to continue new line>';
const lastChildIndex = parentEl.childNodes.length - 1;
const lastChild = parentEl.childNodes[lastChildIndex] as HTMLElement;
if (lastChild) {
  lastChild.innerHTML = '<click here to continue new line>';
} else {
  parentEl.appendChild(continueNode);
}

建议你按顺序尝试上面的方案，先从第一步的类型校验和isConnected判断开始，再替换成selectionchange事件监听，基本就能解决Firefox里的parentNode返回null的问题了。

备注：内容来源于stack exchange，提问作者amachree tamunoemi