JavaScript 函数在第二次调用时无法获取对 DOM 元素的引用

Question

下面是一个非常简单的函数，它将设置 DOM 元素的文本内容。

const display = (el, value) => {
  el.textContent = value;
};

display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');

<span id="element1" />
<span id="element2" />

奇怪的是，当第二次调用时，该函数会出现熟悉的错误:

Uncaught TypeError: Cannot set property 'textContent' of null

起初我认为问题可能是由于执行时第二个元素可能尚未加载，但是:

• 脚本内联在 body 的末尾标记，因此所有 DOM 元素都应该已加载。
• 仅在第二个元素上调用该函数会正确打印 Two .
• 将调用替换为 display()与 console.log(document.getElementById('element1'))和console.log(document.getElementById('element2'))成功打印出两个元素。
• 更改两个调用的顺序仍然只会显示 One ，但没有发生错误。

所以我很困惑。该问题在 stacksnippet 中以及作为单独的 HTML 页面加载时都会出现。当前的 Firefox 和 Chrome 中都会出现这种情况。

我在这里遗漏了一些非常明显的东西吗？谁能告诉我这是怎么回事？

Answer 1

const display = (el, value) => {
  el.textContent = value;
};

display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');

<span id="element1"></span>
<span id="element2"></span>

如果您更正 span 标记，那么它就可以正常工作。这样您就可以正确关闭 span 标记。