您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JavaScript 獲取元素報錯？搞混 `getElementById` 與 `getElementsById`、誤用 `value` 屬性

編輯：程式設計綜合問答

錯誤代碼

document.getElementsById('body1').value = '111111'; // 報錯
alert("你好！");

三個致命錯誤

方法名拼寫錯誤：`getElementsById`（複數 s）不存在。正確是 document.getElementById（單數）。
返回值類型不同：`getElementById` 返回單個 Element；若寫成複數形式，瀏覽器會拋出 `TypeError: document.getElementsById is not a function`。
`div`/`span` 等非表單元素沒有 `value` 屬性。`value` 僅適用於 ``、`` 等表單控件。對於普通容器元素，應使用 <code>innerHTML</code> 或 <code>textContent</code>。</li> </ol> <h3>修正代碼</h3> <pre><code>// 如果 #body1 是 div/span/p 等普通標籤 document.getElementById('body1').innerHTML = '111111'; // 或僅修改文本 document.getElementById('body1').textContent = '111111'; alert("你好！"); </code></pre> <h3>快速判斷表</h3> <table> <thead> <tr><th>元素類型</th><th>獲取/設置內容</th><th>獲取/設置文本</th></tr> </thead> <tbody> <tr><td>`<input>`、`<textarea>`、`<select>`</td><td>.value</td><td>.value</td></tr> <tr><td>`<div>`、`<span>`、`<p>` 等</td><td>.innerHTML</td><td>.textContent / .innerText</td></tr> </tbody> </table> <h2>避坑提示</h2> <ul> <li>IDE 智能提示會自動補全 `getElementById`，不要手打複數；</li> <li>調試時 `console.log(element)` 看原型鏈，確認屬性是否存在；</li> <li>現代項目推薦用 `document.querySelector('#body1')`，語法統一、支持 CSS 選擇器。</li> </ul> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/bczhwd/36840.html' >ASP.NET DropDownList 後台綁定數據前台不顯示？三步排查法</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/bczhwd/36842.html' >ASP.NET Server.Execute 路徑限制：父路徑設置</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_blank">程式設計綜合問答</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30266.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010610422810.png' width='100' height='70' alt='C 語言 scanf 讀取字符吃掉換行符：連續兩次 scanf( %c ) 解決緩衝區殘留' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30266.html' target="_blank"><strong>C 語言 scanf 讀取字符吃掉換行符：連續兩次 scanf("%c") 解決緩衝區殘留</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30266.html' target="_blank"><p>問題現象第一個獨立程序正常讀取字符並判斷字母/ASCII。</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/43390.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010910502053.png' width='100' height='70' alt='C 語言學生成績管理系統代碼邏輯錯誤修復：課程平均分計算下標混淆' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/43390.html' target="_blank"><strong>C 語言學生成績管理系統代碼邏輯錯誤修復：課程平均分計算下標混淆</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/43390.html' target="_blank"><p>錯誤現場函數 `aver_courscore` 計算課程平</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30996.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010611082799.png' width='100' height='70' alt='VC6.0 致命錯誤 RC1015：資源編譯器無法打開文件，重裝或用精簡版解決' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30996.html' target="_blank"><strong>VC6.0 致命錯誤 RC1015：資源編譯器無法打開文件，重裝或用精簡版解決</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/30996.html' target="_blank"><p>錯誤 RC1015 通常因資源文件 (.rc) 路徑錯誤、編</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/46427.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010913092244.png' width='100' height='70' alt='Xcode Storyboard 中如何禁用 Auto Layout 約束' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/46427.html' target="_blank"><strong>Xcode Storyboard 中如何禁用 Auto Layout 約束</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/46427.html' target="_blank"><p>在 Xcode Storyboard 中佈局視圖時，有時需要</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/45854.html' target="_blank">Java 控制台輸入輸出改為文件讀寫：Scanner 與 PrintWriter</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/29355.html' target="_blank">Java 字串拼接產生序列：1:100;2:200;...99:9900 的 For 迴圈與 StringBuilder 實作</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/29248.html' target="_blank">JS 與 CSS 實現 Firefox 首頁風格主題切換滑動效果</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/43338.html' target="_blank">C# WinForm 創建桌面/快速啟動欄快捷方式完整代碼</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/32592.html' target="_blank">前端獲取 URL 參數的通用 JavaScript 函式</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/45190.html' target="_blank">Android 容器與子控件等比例縮放並保持相對位置不變的實現方案</a> <a href='https://code.yunyiwangluo.com/bianchen/bczhwd/45084.html' target="_blank">Cocos2d-x addChild() 引用計數 +1 的具體位置源碼追蹤</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/huibian/' target="_self">組合語言</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/delphi/' target="_self">Delphi</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/groovy/' target="_self">Groovy</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/webSphere/' target="_self">WebSphere</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/rational/' target="_self">Rational</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/python/' target="_self">Python 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/ruby/' target="_self">Ruby 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_self">程式設計疑難解答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_self">程式設計綜合問答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gdgybc/' target="_self">更多程式設計知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcwtjd/' target="_self">程式設計問題解答</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>