JS打字动画脚本仅内嵌HTML生效，如何实现外部引入正常运行？

当你在页面头部引入外部JS文件时，浏览器会优先加载并执行这段脚本，此时页面的DOM结构还未完全渲染，打字动画脚本找不到目标<p>元素，自然无法生效。而把脚本内嵌在<p>标签下方时，DOM已经加载完成，脚本能正常定位到目标元素，所以动画可以正常运行。

以下两种方法都能实现头部引入外部JS文件并正常触发打字动画：

方法1：监听DOM加载完成事件 #

修改你的外部JS文件，将打字动画的核心逻辑包裹在DOMContentLoaded事件回调中，确保脚本只在DOM完全加载后执行：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你的目标元素选择器，比如getElementById或querySelector
  const targetElement = document.getElementById('typewriter');
  // 以下是你的打字动画原有代码
  const text = targetElement.textContent;
  targetElement.textContent = '';
  let index = 0;
  
  function type() {
    if (index < text.length) {
      targetElement.textContent += text.charAt(index);
      index++;
      setTimeout(type, 100); // 可根据需求调整打字速度
    }
  }
  
  type();
});

方法2：给