JS类方法调用getElementById修改span内容报null错误如何解决

问题原因 #

代码的执行顺序触发了DOM覆盖逻辑：

1. 第一行执行document.getElementById('text').innerHTML = 'text'时，会直接清空id="text"的p标签内所有原有子元素和内容，替换为纯文本text，原本嵌套在p标签内的id="reference"span元素会被直接删除
2. 第二行执行document.getElementById('reference')时，DOM树中已经不存在该元素，所以返回null，对null调用innerHTML属性就会抛出对应的TypeError
   类外部可以正常修改的原因是你没有提前执行覆盖p标签内容的操作，span元素还存在于DOM中。

解决方法 #

方法1：调整执行顺序，先操作子元素 #

如果需要保留原有DOM结构，先修改span元素内容，再处理p标签的文本内容，不要直接覆盖p标签的整个innerHTML：

update() {
  // 先操作还存在的span元素
  document.getElementById('reference').innerHTML = 'reference';
  // 单独修改p标签下的文本节点，不覆盖子元素
  const textEl = document.getElementById('text');
  for (const node of textEl.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      node.textContent = 'text';
      break;
    }
  }
}

方法2：直接拼接完整HTML结构一次性赋值 #

如果两个内容都是动态生成的，可以直接拼接完整的DOM结构，一次性写入p标签，避免多次DOM操作：

update() {
  document.getElementById('text').innerHTML = `
    <span id='reference'>reference</span>
    text
  `;
}

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