使用classList.add修改类名无效，请求技术帮助

我希望点击按钮时将元素的类名从popup修改为popup active，但代码无法正常运行。相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html>
<body>
    <script src="js.js"></script>
    <button class="button">click me</button>
    <div class="popup"></div>
</body>
</html>

JS代码（js.js） #

const but = document.querySelector('.button');
const pop = document.querySelector('.popup');

but.onclick = () => {
    pop.classList.add('active');
}

问题原因 #

问题出在脚本加载时机上：你把<script>标签放在了<button>和<div>元素的前面，当浏览器执行js.js里的代码时，页面上的按钮和弹窗元素还没有被解析渲染，所以document.querySelector('.button')和document.querySelector('.popup')都会返回null，自然无法绑定点击事件和修改类名。

解决方案 #

有三种可行的解决方法，任选其一即可：

• 方案一：调整脚本位置
  把<script>标签移到<body>标签的最后，确保DOM元素都加载完成后再执行JS：

<!DOCTYPE html>
<html>
<body>
    <button class="button">click me</button>
    <div class="popup"></div>
    <script src="js.js"></script>
</body>
</html>

• 方案二：使用DOMContentLoaded事件
  在JS代码中监听DOMContentLoaded事件，确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const but = document.querySelector('.button');
    const pop = document.querySelector('.popup');

    but.onclick = () => {
        pop.classList.add('active');
    }
});

• 方案三：给脚本添加defer属性
  给<script>标签加上defer属性，它会让脚本在DOM解析完成后再执行，同时不阻塞页面渲染：

<script src="js.js" defer></script>

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