<html>
<body>
?
<h1>這是一個網圖</h1>
?
<p id="demo">我的第一個段落</p>
?
<script>
document.getElementById("demo").innerHTML="我的一段 JavaScript代碼";
</script>
?
</body>
</html>

這段代碼的操作為獲取id為：demo的元素，并修改他為：我的有單javascript代碼

document.getElementById()報錯處理

在Microsoft Edge和Google Chrome報錯：

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

在Firefox報錯：

Uncaught TypeError: document.getElementById(...) is null

<!DOCTYPE html>
<html  lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" /> 
  <title>測試</title>
</head>
<body>
<script>
  document.getElementById('app').innerHTML= "str";
</script>
<h3 id="app"></h3>
</body>
</html>

保存文件名為：錯誤發(fā)生.html

用Microsoft Edge或Google Chrome瀏覽器打開運行后，再按下F12鍵可查看到報錯信息用瀏覽器打開，就會看到錯誤：

用Firefox瀏覽器打開運行后，再按下F12鍵可查看到報錯信息用瀏覽器打開，就會看到錯誤：

document.getElementById()失效的原因分析原因：

瀏覽器加載HTML文檔時，會將HTML文檔解析為一個樹形結構，稱為DOM樹，代碼的執(zhí)行順序是自上而下依次執(zhí)行，當執(zhí)行到innerHTML這一行代碼時，他并沒有加載到下面的DOM結構，就會報錯無法讀取HTML。

簡單地說，就是body還沒有加載，無法獲取DOM元素，獲取不到節(jié)點所在的節(jié)點。

解決方法：

法一、 document.getElementById()需要放在你這個id位置的后面，如果你把<script>標簽放在head部分的話就可能會出現問題，因為document.getElementById()的使用需要把函數放在id的后面。所以，如果我們想避免這個問題，我們把<script>標簽放在<body>標簽的最后面或</body>標簽之后。并且id要完全一樣，大小寫有差別也不行。

修改后源碼如下：

<!DOCTYPE html>
<html  lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" /> 
  <title>測試</title>
</head>
<body>
<h3 id="app"></h3>
<script>
   document.getElementById('app').innerHTML= "這是一段文本！";
</script>
</body>
</html>

簡要說明，參見下圖：

保存文件名為：錯誤修改.html，用瀏覽器打開，正常運行顯示如下：

法二、還可以如下修改

將document.getElementById()放到函數中，再調用函數。

這里使用HTML onload 事件調用這個函數，源碼如下：

<!DOCTYPE html>
<html  lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" /> 
  <title>測試</title>
<script>
function funA(){
   document.getElementById('app').innerHTML= "這是一段文本！";
}
</script>
</head>
<body onload="funA()">
<h3 id="app"></h3>
</body>
</html>

簡要說明，參見下圖：