GetElementById在使用window.onload時返回null，但不從控制檯運行時返回

Question

我試圖通過id在我的網站中查找div，但是當我從window.onload調用getElementById時，返回空值。我已經驗證了我正在查找的元素存在，並且它沒有與其他任何元素共享一個Id。

奇怪的是，當我從chrome的開發工具中運行一個控制檯命令時，div被返回，因爲它應該是。

我已經提供了一個鏈接到JSFiddle的簡化版本，以及我正在嘗試的簡要顯示，並會感謝您提供的任何好的輸入。

<script> 
    var hasElement = document.getElementById('someId'); 
    alert(hasElement); 
</script> 
<div id="someId">true</div> 

http://jsfiddle.net/ph9Nc/2/

Answer 1

你想獲得的DOM元素尚不存在

您正試圖獲得在它被寫入頁面之前的div。腳本標記會立即執行，除非您明確指示它等待。

你有兩個選擇：

放置腳本的HTML

<div id="someId">true</div> 
<script> 
    var hasElement = document.getElementById('someId'); 
    alert(hasElement); 
</script> 

告訴腳本在加載事件

有了基本的JavaScript執行後...

<script> 
window.onload = function(){ 
    var hasElement = document.getElementById('someId'); 
    alert(hasElement); 
} 
</script> 
<div id="someId">true</div> 

...或使用jQuery ...

<script> 
$(document).ready(function(){ 
    var hasElement = $('#someId'); 
    alert(hasElement); 
}); 
</script> 
<div id="someId">true</div> 

更新：

另外，在大多數現代瀏覽器，你可以使用async or defer attributes上的腳本標記，以避免同步阻塞行爲是默認的。

關於控制檯：

控制檯將在其最後的狀態登錄到該對象的引用，而不是當時的狀態時，它被稱爲在你的腳本。看到這個帖子的解釋：https://stackoverflow.com/a/7389177/2502532

Answer 2

的問題是，你需要改變這一點：

window.onload=urlFinder(); 

這樣：

window.onload=urlFinder; 

或者，你可以調用你的函數從右側前</body>在相關的HTML之後。

您正在立即調用該函數，然後將返回結果分配給window.onload，而不是將函數引用分配給window.onload。請記住，任何時候你使用()，這意味着現在就執行它。任何時候只要分配函數名稱，就意味着爲函數分配一個引用，在稍後他們選擇將()應用於該變量時，該函數可以由某人調用。

此外，你的jsFiddle不是一個有效的測試，因爲整個小提琴被設置爲等待，直到window.onload激發（在左上角），這可能只是讓你更困惑。

這是你的jsfiddle的固定版本（也有一些代碼的JS錯誤）：http://jsfiddle.net/jfriend00/3H9vu/