JavaScript 執行時機陷阱：操作 DOM 元素報錯「找不到元素」的原因與解決

典型錯誤代碼

<head>
    <script>
        var a = document.getElementById("myLink"); // null！
        a.onclick = function() { ... };
    </script>
</head>
<body>
    <a id="myLink" href="#">Link</a>
</body>

根本原因

瀏覽器自上而下解析 HTML，<head> 中的腳本執行時，<body> 尚未解析，DOM 樹中不存在目標元素，getElementById 返回 null。

三種解決方案

1. 腳本放在 body 末尾（最簡單）

<body>
    ...
    <script> var a = document.getElementById("myLink"); ... </script>
</body>

2. 使用 defer 屬性（HTML5 標準）

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

瀏覽器異步下載，HTML 解析完成後按順序執行，DOM 已就緒。

3. 監聽 DOMContentLoaded 事件

document.addEventListener("DOMContentLoaded", function() {
    var a = document.getElementById("myLink");
    a.onclick = ...;
});

原生 JS 無需依賴 jQuery $(document).ready()。

對比總結