使用defer属性时querySelector返回null的原因是什么？

页面明明存在<button>元素，且<script>标签已经添加了defer属性，但执行JS代码时却报错：

Uncaught TypeError: Cannot read properties of null (reading 'classList')

代码示例 #

HTML #

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testHtml</title>
    <link rel="stylesheet" href="test.css">
    <script src="testCode.js" defer></script>
</head>
<body>
    <button>butt1</button>
</body>
</html>

CSS #

. red {background-color:red;}

JavaScript #

let butt1 = document.querySelector("button");
butt1. classList. add("red");

你代码里的两个语法错误是核心问题，其中JS的错误直接导致了异常：

1. JavaScript语法错误
   你在调用属性时，在.和属性名之间加了空格：butt1. classList. add，这不符合JS语法规范——属性访问符.和后面的属性名之间不能有空格。正确的写法应该是：

   let butt1 = document.querySelector("button");
   butt1.classList.add("red");
   

   这种语法错误会让JS引擎无法正确解析代码，进而引发执行异常，甚至表现出类似DOM未加载完成的错误。

2. CSS语法错误
   你的类选择器. red前面多了一个空格，正确的类选择器应该是.red。这个错误不会导致JS报错，但会导致后续给按钮添加red类后，样式无法生效。

额外排查点 #

如果修正上述错误后仍然遇到null问题，可以检查：

• 确认testCode.js的文件路径是否正确，通过浏览器开发者工具的Network面板查看脚本是否成功加载。
• 若通过file://协议打开本地文件，部分浏览器对defer的处理存在兼容性问题，可尝试用本地服务器（比如VS Code的Live Server插件）运行代码后再测试。

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