無法從腳本中找到元素

我試圖從JavaScript獲取DOM元素。即使ID是正確的，getElementId似乎無法找到它;我在Chrome得到無法從腳本中找到元素

TypeError: Cannot read property 'innerHTML' of null

，或者

TypeError: x is null

在Firefox只使用下面的簡單代碼

。爲什麼是這樣？

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      var x = document.getElementById("myHeader"); 
      alert(x.innerHTML); 
     </script> 
    </head> 
    <body> 
     <h1 id="myHeader">Click me!</h1> 
    </body> 
</html>

來源

2010-04-26 Dennis D

還是把它留在<head>，但它包裝在一個函數並調用它，當<body>加載

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript"> 
<!-- 
    function init(){ 
     var x=document.getElementById("myHeader"); 
     alert(x.innerHTML); 
    } 

//--> 
</script> 
</head> 
<body onload="init();"> 

<h1 id="myHeader">Click me!</h1> 

</body> 
</html>

來源

2010-04-26 21:48:11

使用內聯屬性事件處理程序不被認爲是最佳實踐。直接指定一個函數會更清晰 - 'window.onload = function（）{...}' – friedo 2010-04-26 21:51:54

由於<script>標籤是<head>標籤內，它運行的身體被分析之前，所以myHeader元素還不存在。

您需要將<script>塊放在<body>標記的末尾。

來源

2010-04-26 21:47:34 SLaks

- 或 - 將整個shabang放在'document.onLoad'函數中。 – dclowd9901 2010-04-26 21:54:44

移動你的腳本的底部在這種情況下，像這樣：

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body>  
<h1 id="myHeader">Click me!</h1>  
<script type="text/javascript"> 
<!-- 
    var x=document.getElementById("myHeader"); 
    alert(x.innerHTML); 
//--> 
</script> 
</body> 
</html>

目前，它的執行的元素存在之前，所以它的示數，因爲它沒有找到任何東西，x是不確定的。在正文結尾處運行腳本將解決此問題。

來源

2010-04-26 21:47:57

的問題是，此刻的你叫getElementById功能的DOM還沒有完成加載但，因此不存在元素myHeader。當DOM完成加載時，您需要執行此代碼。例如：

window.onload = function() { 
    var x = document.getElementById("myHeader"); 
    alert(x.innerHTML); 
};

如果你使用流行的jQuery框架，你的代碼可能是這樣的：

$(function() { 
    var x = $("#myHeader"); 
    alert(x.html()); 
});

，它會與大多數瀏覽器。

另一種選擇是把你的script剛剛閉幕的body標記之前：一旦你的腳本開始執行myHeader元素就已經被加載

<h1 id="myHeader">Click me!</h1> 

<script type="text/javascript"> 
<!-- 
    var x=document.getElementById("myHeader"); 
    alert(x.innerHTML); 
//--> 
</script> 
</body>

由於DOM加載順序。

來源

2010-04-26 21:48:36

在加載HTML之前，您的腳本正在運行。將腳本移到底部或延遲執行，直到頁面加載完畢。

此外，您永遠不需要使用來隱藏腳本。沒有什麼可以隱藏起來的

來源

2010-04-26 21:48:39

你覺得瀏覽器會在點擊標題後調用你的代碼嗎？您需要將提醒（某物）提取到某個功能中，例如

function hello(){ 
    alert("hello world"); 
}

和h1元素添加的onClick = 「你好（）」屬性。

來源

2010-04-26 21:49:47 Axarydax

他並沒有試圖做出點擊事件。 – SLaks 2010-04-26 21:50:06

我只是認爲「點擊我！」標題足夠描述，OP正在嘗試點擊它來做某件事。方式做一個紅色的按鈕，說「推我」，但操作實際上是由遠程傳感器控制，杜 – Axarydax 2010-04-27 06:14:53

這不起作用，因爲瀏覽器在看到它時立即執行腳本，這是之前您的h1標記被解析並添加到DOM。

您可以將<script>標記放在yoru文檔的末尾，但更好的方法是通過將警報放在窗口的onload處理程序中來推遲執行。

如果您有興趣使用像jQuery框架，它提供了類似ready事件。

來源

2010-04-26 21:50:10 friedo

無法從腳本中找到元素

回答

相關問題