js中document.getElementById(id)的具體用法

更新時間：2023年04月21日 10:35:22 作者：陳卿諾語

本文主要介紹了js中document.getElementById(id)的具體用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.document.getElementById(id)是javascript中訪問某個元素的方法。

2.括號中的id是用來標識某個元素的。

3.具體用法：

例如：通過指定的id獲取某個元素，并改變其內(nèi)容

<html>
<body>
?
<h1>這是一個網(wǎng)圖</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文檔解析為一個樹形結(jié)構(gòu)，稱為DOM樹，代碼的執(zhí)行順序是自上而下依次執(zhí)行，當執(zhí)行到innerHTML這一行代碼時，他并沒有加載到下面的DOM結(jié)構(gòu)，就會報錯無法讀取HTML。

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

解決方法：

法一、 document.getElementById()需要放在你這個id位置的后面，如果你把<script>標簽放在head部分的話就可能會出現(xiàn)問題，因為document.getElementById()的使用需要把函數(shù)放在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()放到函數(shù)中，再調(diào)用函數(shù)。

這里使用HTML onload 事件調(diào)用這個函數(shù)，源碼如下：

<!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>

簡要說明，參見下圖：

用瀏覽器運行顯示效果和前面的一樣。

附、document的getElementById 方法（method） document.getElementById - Web API 接口參考 | MDN

到此這篇關(guān)于js中document.getElementById(id)的具體用法的文章就介紹到這了,更多相關(guān)document.getElementById(id)用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: