document.getElementById，$(& quot；# id & quot)或任何其他找不到元素的DOM方法/ jQuery選擇器？

示例問題包括:

jQuery未能綁定事件處理程序 jQuery & quotgetter & quot方法(。val()，。html()，。text())返回未定義 返回null的標準DOM方法會導致以下幾種錯誤: 未捕獲的類型錯誤:無法設置屬性“...”無效的 未捕獲的類型錯誤:無法設置null的屬性(設置“...”) 未捕獲的類型錯誤:無法讀取屬性“...”無效的 未捕獲的類型錯誤:無法讀取null的屬性(讀取“...”)

最常見的形式有:

未捕獲的類型錯誤:無法將屬性“onclick”設置為null 未捕獲的類型錯誤:無法讀取null的屬性“addEventListener” 未捕獲的類型錯誤:無法讀取null的屬性“style”

腳本運行時，您試圖查找的元素不在DOM中。

依賴于DOM的腳本的位置會對其行為產生深遠的影響。瀏覽器從上到下解析HTML文檔。元素被添加到DOM中，腳本(通常)在遇到時被執行。這意味著秩序很重要。通常，腳本找不到后來出現在標記中的元素，因為這些元素還沒有被添加到DOM中。

考慮以下標記:腳本#1無法找到& ltdiv & gt當腳本#2成功時:

<script>
  console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>

簡單明了:因為您要尋找的元素在文檔中還不存在。

對于本回答的其余部分，我將使用getElementById作為示例，但這同樣適用于getElementsByTagName、querySelector和任何其他選擇元素的DOM方法。

可能的原因

元素可能不存在有三個原因:

文檔中實際上不存在具有傳遞的ID的元素。您應該仔細檢查傳遞給getElementById的Id是否確實與(生成的)HTML中現有元素的ID匹配，并且沒有拼錯ID(ID是區分大小寫的！).

如果使用getElementById，請確保只給出元素的Id(例如，document . getelemntbyid(& quot；-id & quot；)).如果您使用的是接受CSS選擇器的方法(如querySelector)，請確保在ID前包含#以表明您正在尋找ID(例如，document . query selector(& quot；# the-id & quot；)).不得將#與getElementById一起使用，必須將其與querySelector和類似的一起使用。還要注意，如果ID中包含在CSS標識符中無效的字符(比如a。id屬性包含。字符是不好的做法，但有效)，您必須在使用query selector(document . query selector(& quot；#the\\。id & quot)))但在使用getElementById(document . getElementById(& quot；. & quot)).

調用getElementById時，該元素不存在。

元素不在您查詢的文檔中，盡管您可以在頁面上看到它，因為它在iframe中(iframe是它自己的文檔)。當您搜索包含iframes中的元素的文檔時，不會搜索這些元素。

如果問題是原因3(在iframe或類似的框架中)，您需要在iframe中查看文檔，而不是父文檔，可能是通過獲取iframe元素并使用其contentDocument屬性來訪問其文檔(僅限同源)。這個答案的其余部分解決了前兩個原因。

第二個原因——還沒有——很常見。瀏覽器從上到下解析和處理HTML。這意味著在DOM元素出現在HTML中之前對該DOM元素的任何調用都將失敗。

考慮下面的例子:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

div出現在腳本之后。在執行腳本時，元素尚不存在，getElementById將返回null。

jQuery

這同樣適用于所有帶有jQuery的選擇器。如果您拼錯了選擇器，或者您試圖在元素實際存在之前選擇它們，jQuery將不會找到元素。

一個額外的問題是，如果沒有找到jQuery，因為您已經加載了沒有協議的腳本，并且正在從文件系統運行:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

該語法用于允許腳本通過HTTPS加載到協議為https://的頁面上，以及加載協議為http://的頁面上的HTTP版本

它有一個不幸的副作用，就是試圖加載file://somecdn.somewhere.com卻失敗了...

解決方法

在調用getElementById(或任何DOM方法)之前，請確保要訪問的元素存在，即DOM已加載。

這可以通過簡單地將JavaScript放在相應的DOM元素之后來確保

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

在這種情況下，您也可以將代碼放在結束body標記之前(& lt/body & gt；)(所有DOM元素在腳本執行時都將可用)。

其他解決方案包括偵聽load [MDN]或DOMContentLoaded [MDN]事件。在這些情況下，將JavaScript代碼放在文檔中的什么位置并不重要，只需記住將所有DOM處理代碼放在事件處理程序中。

示例:

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

有關事件處理和瀏覽器差異的更多信息，請參閱quirksmode.org的文章。

jQuery

首先確保jQuery被正確加載。使用瀏覽器的開發人員工具來確定是否找到了jQuery文件，如果沒有找到，則更正URL(例如，在開頭添加http:或https:方案，調整路徑等)。)

監聽load/DOMContentLoaded事件正是jQuery正在做的事情。ready() [docs]。影響DOM元素所有jQuery代碼都應該在事件處理程序中。

事實上，jQuery教程明確指出:

當我們使用jQuery讀取或操作文檔對象模型(DOM)時，我們需要確保我們開始添加事件等。一旦大教堂準備好了。

為此，我們為文檔注冊了一個就緒事件。

$(document).ready(function() {

// do stuff when DOM is ready
});

或者，您也可以使用簡寫語法:

$(function() {
    // do stuff when DOM is ready
});

兩者相當。

基于id的選擇器不起作用的原因

具有指定id的元素/DOM尚不存在。 該元素存在，但是沒有在DOM中注冊[如果HTML節點是從Ajax響應中動態追加的]。 存在多個具有相同id的元素，這導致了沖突。 解決方法

嘗試在元素聲明后訪問它，或者使用像$(document)這樣的東西。ready()；

對于來自Ajax響應的元素，使用。jQuery的bind()方法。早期版本的jQuery。live()同樣適用。

使用工具[例如，瀏覽器的webdeveloper插件]找到重復的id并刪除它們。

如果您試圖訪問的元素在iframe內部，而您試圖在iframe的上下文之外訪問它，這也會導致它失敗。

如果你想在iframe中得到一個元素，你可以在這里找到。

正如@FelixKling所指出的，最有可能的情況是你要找的節點還不存在(還不存在)。

然而，現代開發實踐通常可以在文檔樹之外操作文檔元素，或者使用文檔片段，或者直接分離/重新附加當前元素。這種技術可以作為JavaScript模板的一部分使用，或者在所討論的元素被大量修改時避免過多的重畫/回流操作。

類似地，跨現代瀏覽器推出的新“影子DOM”功能允許元素成為文檔的一部分，但不能被document.getElementById及其所有兄弟方法(querySelector等)查詢。).這樣做是為了封裝功能，特別是隱藏功能。

盡管如此，最有可能的是，您正在尋找的元素根本不在文檔中，您應該按照Felix的建議去做。但是，您還應該意識到，這越來越不是一個元素無法找到的唯一原因(無論是暫時的還是永久的)。

如果腳本執行順序不是問題所在，則問題的另一個可能原因是沒有正確選擇元素:

getElementById要求傳遞的字符串必須是Id，除此之外別無其他。如果您在傳遞的字符串前加上#前綴，并且ID不是以#開頭，則不會選擇任何內容:

<div id="foo"></div>

// Error, selected element will be null:
  document.getElementById('#foo')
  // Fix:
  document.getElementById('foo')

同樣，對于getElementsByClassName，不要在傳遞的字符串前加上前綴:

<div class="bar"></div>

// Error, selected element will be undefined:
  document.getElementsByClassName('.bar')[0]
  // Fix:
  document.getElementsByClassName('bar')[0]

對于querySelector、querySelectorAll和jQuery，要匹配具有特定類名的元素，請直接在類前放置一個。。類似地，要匹配具有特定ID的元素，請在ID前面直接加上一個#:

<div class="baz"></div>

// Error, selected element will be null:
  document.querySelector('baz')
  $('baz')
  // Fix:
  document.querySelector('.baz')
  $('.baz')

在大多數情況下，這里的規則與CSS選擇器的規則相同，在這里可以看到細節。

要匹配具有兩個或更多屬性的元素(比如兩個類名，或者一個類名和一個數據屬性)，請在選擇器字符串中將每個屬性的選擇器放在一起，不要用空格分隔(因為空格表示后代選擇器)。例如，要選擇:

<div class="foo bar"></div>

使用查詢字符串. foo.bar .來選擇

<div class="foo" data-bar="someData"></div>

使用查詢字符串。foo[data-bar = & quot；someData & quot].選擇& ltspan & gt如下圖:

<div class="parent">
    <span data-username="bob"></span>
  </div>

使用div.parent & gtspan[data-username = & quot；鮑勃& quot].

大寫和拼寫對以上所有內容都很重要。如果大小寫不同，或者拼寫不同，則不會選擇該元素:

<div class="result"></div>

// Error, selected element will be null:
  document.querySelector('.results')
  $('.Result')
  // Fix:
  document.querySelector('.result')
  $('.result')

您還需要確保這些方法具有正確的大小寫和拼寫。使用以下方式之一:

$(selector)
document.querySelector
document.querySelectorAll
document.getElementsByClassName
document.getElementsByTagName
document.getElementById

任何其他拼寫或大寫都不起作用。例如，document.getElementByClassName將引發錯誤。

確保向這些選擇器方法傳遞一個字符串。如果向querySelector、getElementById等傳遞不是字符串的東西，幾乎可以肯定是行不通的。

如果您想要選擇的元素上的HTML屬性用引號括起來，它們必須是普通的直引號(單引號或雙引號)；如果您試圖通過ID、類或屬性進行選擇，像“或”這樣的彎引號將不起作用。