今天使用 VSCode 運行 js 腳本時總是報錯 ReferenceError: document is not defined
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="Utf-8">
<title>testDom</title>
</head>
<body>
<h1>Love</h1>
<p id="para">Never give up.</p>
<script type="text/javascript">
var paragraph = document.getElementById('para'); // 不能調用 document.getElementById('para')
console.log(paragraph.id);
</script>
</body>
</html>
出現錯誤的原因是因為不了解 js 腳本的運行環境：
- js 腳本的運行環境有瀏覽器環境和 Node.js 兩種，根據 Node.js 官方網站的介紹，Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
- 上述代碼調用了 Document 類型提供的方法 getElementById()，屬於 DOM 的應用，但是對於 DOM 和 BOM 的操作只有在瀏覽器環境下才能進行，
- 而在 VSCode 這里我是用插件 Code Runner 來運行 js 腳本的，Code Runner 的配置是 Node.js
環境，如果操作 DOM 就會報錯。
如果要了解更多兩種運行環境的區別，請參考 https://blog.csdn.net/weixin_44114310/article/details/90452246。
如果要在 Node.js 環境里使用瀏覽器環境下的 document 對象，可能得借助 Node.js 庫 jsdom，我沒有實際操作過，詳情請參考 https://cloud.tencent.com/developer/article/1438893。
這次的錯誤折騰了我一個上午，都快崩潰了，說到底還是自身的基礎不夠扎實，不過也讓我學習了解了谷歌開發者工具 Chrome DevTools，之前一直依賴於 VSCode，也算是有所收獲吧。