为何JS实现的动态标题文本无法在页面加载时实时更新？

• DOM获取时序错位：如果JS代码未绑定DOMContentLoaded页面加载完成事件就直接执行，脚本运行时#typed对应的空span还未被浏览器解析生成，代码拿不到目标DOM节点的引用，后续所有文本写入、更新操作都会直接失效。
• 核心逻辑存在断层：你贴出的JS片段仅实现了创建光标节点、设置类名的半截逻辑，缺失两个必备环节：
  • 没有将创建好的光标节点追加到页面DOM树中，节点根本不会渲染出来
  • 没有编写逐字写入、循环切换文本的定时执行逻辑，空有节点结构不会自动产生动态更新效果
• 样式配置冲突：你手写的.typed-cursor节点设置了行内样式animation-iteration-count: 0，直接锁死了光标的循环闪烁动画，会让用户误判整个打字功能没有运行，哪怕文本已经开始逐字输出，也缺乏动态反馈。

附纯原生可运行的最小实现参考：

<!-- 页面基础结构 -->
<span id="typed"></span>
<style>
/* 实现光标闪烁效果 */
.typed-cursor {
  animation: blink 0.7s infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
</style>
<script>
// 等DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  const typedContainer = document.getElementById('typed');
  // 初始化光标节点
  const cursor = document.createElement('span');
  cursor.className = 'typed-cursor';
  cursor.textContent = '|';
  // 将光标节点追加到目标容器旁
  typedContainer.after(cursor);

  // 配置待切换的文本列表
  const textPool = ['炫酷文本特效', '动态逐字输出', '内容自动轮播'];
  let currentTextIndex = 0;
  let currentCharIndex = 0;
  // 定时逐字更新文本内容
  setInterval(() => {
    currentCharIndex++;
    // 文本写完后切换到下一条
    if (currentCharIndex > textPool[currentTextIndex].length) {
      currentTextIndex = (currentTextIndex + 1) % textPool.length;
      currentCharIndex = 0;
    }
    typedContainer.textContent = textPool[currentTextIndex].slice(0, currentCharIndex);
  }, 150)
})
</script>

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