當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

發布時間：2023/12/20 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有時候。在JavaScript中。即使設置了ID也有可能出現document.getElementById()獲取不到的情況，然后你就開始想document是否寫錯之類的。事實上根本就不是你的代碼的大寫和小寫出現了問題。主要是你還沒有搞清楚直接寫在<script></script>之間東西與寫在window.οnlοad=function(){}里面的東西的差別究竟在哪里。

比方例如以下的很一段簡單代碼，在網頁中除了一個ID為a，然后里面寫了aaaa的圖層div之外就再也沒有其他東西了，在頭部有一段寫得“很規范”的腳本，本來就<script></script>就能夠了，與<script type="text/javascript" language="javascript"></script>根本就沒有差別的。免得有些人自以為很規范的紀律流。說是由于這個原因而導致以下的一系列的問題。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>onloadtest</title> <script type="text/javascript" language="javascript"> alert(document.getElementById("a")); window.οnlοad=function(){alert(document.getElementById("a").innerHTML);} </script> </head> <body> <div id="a">aaaa</div> </body> </html> <script>alert(document.getElementById("a").innerHTML); </script>

這段腳本首先要獲取一個圖層，然后再通過window.onload之后獲得一個a圖層的內容。預計非常多人以為第一行代碼

alert(document.getElementById("a"));會彈出類似于[Object:HTML ObjectElement]之類的東西吧？我在之前也這樣覺得的，但實際執行結果。卻是例如以下效果：

咦？怎么第一個alert會彈出空啊？這是由于HTML在載入的時候，是一行一行地編譯。動態編譯的，它不是像C語言那樣，一次性地編譯整個程序。再給你執行的。也就是所謂的動態編譯域與靜態編譯域的差別。因此，能夠解釋為什么Javascript讀到錯誤會自己主動停止執行。也會出現此前我已經提到過的《【JavaScript】變量沖突是能夠通過編譯的》（點擊打開鏈接）的問題。

回到正題上面來。開始，網頁讀到第一個alert腳本的時候。網頁中根本就沒有出現id為a的圖層div！

所以不能獲取是非常正常的。

解決方案有兩個，一個是使用window.οnlοad=function(){}，要求這段腳本必須在全部的網頁東西讀完才干執行。二是。直接把這段腳本放在最以下</html>之后，這樣就能夠直接放在<script></script>之中了，腳本腳本，處于腳部的網頁執行劇本，望文生義都知道要放在網頁的腳部了。這也是我非常不爽一些人老是愛在<head></head>寫腳本的原因。

當然，通過這個樣例，你也要清楚，假設在頭部引入javascript。類似<script src="js/jquery-1.11.1.js"></script>之類的，注意。假設引入的Javascript中出現要網頁一開始就載入的javascript的話，必須把寫著腳本寫入window.οnlοad=function(){}

總結

以上是生活随笔為你收集整理的【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。