原文网址：解决HTML的script标签在head中无法访问DOM的问题_IT利刃出鞘的博客-CSDN博客
简介
本文用实例介绍如何解决HTML的script标签在head中无法访问DOM的问题。
问题复现
代码结构
代码
demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<script src="./js/demo.js"> </script>
</head>
<body>
<div class="container">
这是div元素
</div>
<input type="text" id="test-input-1" value="abcd">
</body>
</html>
demo.js
let inputElement = document.getElementById(`test-input-1`);
alert(inputElement)结果：（head中的script获得不到DOM）。详情如下：
先显示“null”：
点击确定后：
解决方案：defer（延迟）
说明
defer 特性告诉浏览器它应该继续处理页面，并“在后台”下载脚本，然后等页面加载
完成后，再顺序执行脚本。
- 具有 defer 特性的脚本不会阻塞页面。
- 具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded事件之前执行。
- 具有 defer 特性的脚本保持其相对顺序，就像常规脚本一样
- 因此，如果我们有一个长脚本在前，一个短脚本在后，那么后者就会等待前者。例：
-
<script defer src="https://javascript.info/article/script-async-defer/long.js"></script> <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>
- defer 特性仅适用于外部脚本
- 如果 <script> 脚本没有 src ，则会忽略 defer 特性。
实例
demo.js（不变）
let inputElement = document.getElementById(`test-input-1`);
alert(inputElement)demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<script defer src="./js/demo.js"> </script>
</head>
<body>
<div class="container">
这是div元素
</div>
<input type="text" id="test-input-1" value="abcd">
</body>
</html>
测试：（可以访问DOM）
现象：先出现DOM元素，后运行js代码。
注意：async(异步)不能解决
说明
async 特性意味着脚本是完全独立的：
- 页面不会等待异步脚本，它会继续处理并显示页面内容。
- DOMContentLoaded 和异步脚本不会彼此等待：
- DOMContentLoaded 可能会发生在异步脚本之前（如果异步脚本在页面完成后才加载完成）
- DOMContentLoaded 也可能发生在异步脚本之后（如果异步脚本很短，或者是从 HTTP 缓存中加载的）
- 其他脚本不会等待 async 脚本加载完成，同样， async 脚本也不会等待其他脚本。
实例
demo.js（不变）
let inputElement = document.getElementById(`test-input-1`);
alert(inputElement)demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<script async src="./js/demo.js"> </script>
</head>
<body>
<div class="container">
这是div元素
</div>
<input type="text" id="test-input-1" value="abcd">
</body>
</html>