JavaScript无法获取pre元素：querySelector返回null报错求助

问题原因 #

你的JS代码在<head>标签内加载执行时，<body>里的<pre>元素还未被浏览器解析渲染完成，因此document.querySelector("pre")会返回null。当鼠标移动触发事件调用rotateElement函数时，尝试访问null的style属性就会抛出类型错误。

修复方案 #

有三种常用方法可以解决这个DOM加载顺序问题：

方法1：将script标签移至body末尾

把<script>标签放到</body>闭合标签之前，确保所有DOM元素加载完成后再执行JS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
        <span class="token punctuation">}</span></code></pre>

    <!-- 移至body末尾 -->
    <script src="main.js" type="application/javascript"></script>
</body>
</html>

方法2：用DOMContentLoaded事件包裹代码

在JS代码中监听DOMContentLoaded事件，确保DOM加载完成后再执行元素查询和事件绑定：

document.addEventListener('DOMContentLoaded', () => {
    const pre = document.querySelector("pre");
    console.log(pre)

    document.addEventListener("mousemove", (e) => {
        rotateElement(e, pre);
    })

    function rotateElement(event, element) {
        const x = event.clientX;
        const y = event.clientY; 

        const middleX = window.innerWidth / 2;
        const middleY = window.innerHeight / 2;

        const offsetX = ((x-middleX) / middleX) * 30;
        // 修正：原代码错误使用x计算Y轴偏移，改为y
        const offsetY = ((y-middleY) / middleY) * 30;

        element.style.setProperty("--rotateX", -1 * offsetY + "deg");
        element.style.setProperty("--rotateY", offsetX + "deg");
    }
})

方法3：给script标签添加defer属性

在<script>标签上添加defer属性，浏览器会在DOM加载完成后再执行脚本：

<script src="main.js" type="application/javascript" defer></script>

额外提示 #

注意你的代码中计算offsetY时错误使用了x-middleY，已在方法2中修正为y-middleY，否则3D旋转的Y轴效果会不符合预期。

内容的提问来源于stack exchange，提问作者Elton Grivith D Souza