外部JS文件应放在何处以对下载的HTML页面执行DOM操作

报错原因排查 #

ReferenceError: document is not defined报错的核心原因是代码运行环境不支持浏览器全局对象，你首先要确认：

• 你是通过浏览器打开下载好的维基百科HTML文件触发脚本执行，而非直接用Node.js等后端运行环境单独执行manipulation.js文件，Node.js环境本身没有内置document、window等浏览器专属的全局API，直接运行JS文件必然会抛出该错误。

外部JS引入的正确放置位置 #

你可以选择以下任意一种方案放置引入代码：

方案1：放在body闭合标签前（最推荐） #

将<script src="manipulation.js"></script>放在HTML文件的</body>闭合标签的紧前位置，此时整个页面的DOM树已经完全解析完成，你在manipulation.js中可以直接操作所有页面元素，无需额外添加加载监听。
示例结构：

<!-- 页面其他内容 -->
  <script src="manipulation.js"></script>
</body>
</html>

方案2：放在head标签中，添加defer属性 #

如果你需要把引入代码放在<head>区域，给script标签添加defer属性即可，浏览器会自动延迟脚本执行，直到整个DOM解析完成：

<head>
  <!-- 其他head配置 -->
  <script src="manipulation.js" defer></script>
</head>

方案3：任意位置放置，JS内部添加DOM加载监听 #

如果不想调整引入代码的位置，可以在manipulation.js的所有DOM操作代码外层包裹DOM加载完成监听事件，无论script放在页面哪个位置都可以正常执行：

document.addEventListener('DOMContentLoaded', function() {
  // 把你所有的DOM操作代码写在这里
})

注意事项 #

• 不要给script标签添加async属性，async属性会在脚本加载完成后立刻执行，不等待DOM解析完成，会出现找不到目标元素的问题
• 确保manipulation.js文件和你下载的维基百科HTML文件放在同一个目录下，避免出现路径错误导致脚本加载失败

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