快捷導(dǎo)航

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

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

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

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

2.括號(hào)中的id是用來標(biāo)識(shí)某個(gè)元素的。

3.具體用法：

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

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

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

document.getElementById()報(bào)錯(cuò)處理

在Microsoft Edge和Google Chrome報(bào)錯(cuò)：

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

在Firefox報(bào)錯(cuò)：

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

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

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

用Microsoft Edge或Google Chrome瀏覽器打開運(yùn)行后，再按下F12鍵可查看到報(bào)錯(cuò)信息用瀏覽器打開，就會(huì)看到錯(cuò)誤：

用Firefox瀏覽器打開運(yùn)行后，再按下F12鍵可查看到報(bào)錯(cuò)信息用瀏覽器打開，就會(huì)看到錯(cuò)誤：

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

瀏覽器加載HTML文檔時(shí)，會(huì)將HTML文檔解析為一個(gè)樹形結(jié)構(gòu)，稱為DOM樹，代碼的執(zhí)行順序是自上而下依次執(zhí)行，當(dāng)執(zhí)行到innerHTML這一行代碼時(shí)，他并沒有加載到下面的DOM結(jié)構(gòu)，就會(huì)報(bào)錯(cuò)無法讀取HTML。

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

解決方法：

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

修改后源碼如下：

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

簡要說明，參見下圖：

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

法二、還可以如下修改

將document.getElementById()放到函數(shù)中，再調(diào)用函數(shù)。

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

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

簡要說明，參見下圖：

用瀏覽器運(yùn)行顯示效果和前面的一樣。

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

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

您可能感興趣的文章: