解决HTML的script标签在head中无法访问DOM的问题

绝地灬酷狼 2023-09-29 16:18 5阅读 0赞

原文网址：[解决HTML的script标签在head中无法访问DOM的问题\_IT利刃出鞘的博客-CSDN博客][HTML_script_head_DOM_IT_-CSDN]

## 简介 ##

本文用实例介绍如何解决HTML的script标签在head中无法访问DOM的问题。

## 问题复现 ##

**代码结构**

![8eeb9c500c7249848684bdb7be93a4c0.png][]

**代码**

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”：

![3df437e8369a48d5a753a5e883ee468a.png][]

点击确定后：

![66ebc86642a94de083bd3eafd1827cb5.png][]

## 解决方案：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代码。

![a22c324748f544c98f1a133350de2974.png][]

## 注意：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>

[HTML_script_head_DOM_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125156554
[8eeb9c500c7249848684bdb7be93a4c0.png]: https://img-blog.csdnimg.cn/8eeb9c500c7249848684bdb7be93a4c0.png
[3df437e8369a48d5a753a5e883ee468a.png]: https://img-blog.csdnimg.cn/3df437e8369a48d5a753a5e883ee468a.png
[66ebc86642a94de083bd3eafd1827cb5.png]: https://img-blog.csdnimg.cn/66ebc86642a94de083bd3eafd1827cb5.png
[a22c324748f544c98f1a133350de2974.png]: https://img-blog.csdnimg.cn/a22c324748f544c98f1a133350de2974.png