JavaScript 全局變量獲取 DOM 元素為 null 的兩大原因

現象

var imgElement = document.getElementById("box02");
function fun1() {
    alert(imgElement); // null
}

將賦值語句移入函數內部則正常。

原因分析

1. 執行時機早於 DOM 就緒：全局腳本在 <head> 或 <body> 開始處執行，目標元素尚未解析，getElementById 返回 null。
   解決：放在 window.onload、DOMContentLoaded 或 <script> 放在 </body> 前。
2. 變量被覆蓋：同名局部變量、同步腳本重新聲明、框架生命周期導致引用失效。
   解決：檢查作用域鏈，避免重複聲明，使用 let/const 防止提升。

最佳實踐

• 統一在 DOM 就緒後初始化 DOM 引用。
• 模塊化開發避免全局污染。
• 調試時用 console.log(document.getElementById(...)) 觀察時間點。