原文网址:解决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>