JavaScript 中的“ReferenceError：document is not defined”錯誤是嘗試在瀏覽器環境（例如Node.js）之外訪問文件物件時發生的常見問題。如果指令碼在 HTML 文件完全載入之前執行，也會出現這種錯誤。 本文將探討導致此錯誤的原因，並提供解決方法。
問題陳述
文件物件是 Web API 的一部分，只能在瀏覽器上下文中使用。 在 Node.js 等環境中執行 JavaScript 時，文件物件不可用，從而導致 "ReferenceError"。 此外，在瀏覽器完全載入頁面之前嘗試訪問文件物件也會導致此錯誤。
請看下面的 JavaScript 程式碼：
console.log(document.getElementById("myElement"));
如果在 Node.js 環境中執行此程式碼，就會出現錯誤：
ReferenceError： document is not defined“（JavaScript 中的 ReferenceError： document is not defined）
解決錯誤的方法
爲了解決這個問題，我們需要確保在適當的環境（瀏覽器）和正確的時間（DOM完全載入後）訪問文件物件。
1. 檢查環境
如果程式碼依賴於文件物件，請確保程式碼在瀏覽器環境中執行。 如果我們需要在 Node.js 中執行程式碼，則應使用 jsdom 等庫來模擬瀏覽器環境。
2.使用 window.onload
確保指令碼在載入完整個頁面後執行：
window.onload = function() {
console.log(document.getElementById("myElement"));
};
3.使用 DOMContentLoaded 事件
確保指令碼在 DOM 完全載入後並且在影象以及樣式表等其他資源之前執行：
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("myElement"));
});
4. 將指令碼放在正文的末尾
將指令碼標記放在正文部分的末尾，以便它們在解析 HTML 後執行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
console.log(document.getElementById("myElement"));
</script>
</body>
</html>
示例：透過使用 window.upload 來修復上述錯誤。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
window.onload = function() {
console.log(document.getElementById("myElement"));
};
</script>
</body>
</html>
輸出
<div id="myElement">Hello World</div>
示例：透過使用 DOMContentLoaded 事件來修復上述錯誤的實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("myElement"));
});
</script>
</body>
</html>
輸出
<div id="myElement">Hello World</div>
