搜尋

首頁  >  問答  >  主體

為什麼 jQuery 或 getElementById 無法定位元素?

document.getElementById$("#id") 或任何其他 DOM 方法/jQuery 選擇器找不到元素的可能原因是什麼?

範例問題包括:

未捕獲類型錯誤:無法設定 null 屬性“...”

# 未捕獲的類型錯誤:無法設定 null 的屬性(設定“...”)

未捕獲的類型錯誤:無法讀取 null 的屬性“...”

# 未捕獲的類型錯誤:無法讀取 null 的屬性(讀取“...”)

最常見的形式是:

未捕獲類型錯誤:無法將屬性“onclick”設定為 null

未捕獲的類型錯誤:無法讀取 null 的屬性“addEventList ener”

未捕獲的類型錯誤:無法讀取 null 的屬性“樣式”


P粉575055974P粉575055974444 天前785

全部回覆(2)我來回復

  • P粉976737101

    P粉9767371012023-10-16 13:56:39

    簡短:因為您要尋找的元素在文件中尚不存在。


    對於這個答案的其餘部分,我將使用例如getElementById ,但這同樣適用於getElementsByTagName#, < code>querySelector,以及選擇元素的任何其他DOM 方法。

    可能的原因

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

    1. 文件中確實不存在具有傳遞的 ID 的元素。您應該仔細檢查您傳遞給getElementById 的ID 是否確實與(生成的)HTML 中現有元素的ID 匹配,並且您沒有拼寫錯誤該ID(ID 是區分大小寫!)。

      如果您使用 getElementById,請確保您提供元素的 ID(例如 document.getElemntById("the-id “))。如果您使用的方法接受CSS 選擇器(例如querySelector),請確保在ID 之前包含# 以表示您正在尋找ID(例如,document.querySelector(" #the-id"))。您不能#與getElementById一起使用,並且必須將其與querySelector一起使用和類似的。另請注意,如果ID 中包含在CSS 標識符(例如.;包含. 字元的id 屬性是不好的做法,但有效),您必須使用querySelector (document.querySelector("#the\\.id"))) 時轉義這些內容,但使用getElementById ( >document.getElementById("the.id"))。

    2. 您呼叫 getElementById 時該元素不存在。

    3. 即使您可以在頁面上看到該元素,但該元素並不在您正在查詢的文檔中,因為它位於 iframe 中(這是它自己的文檔)。當您搜尋包含 iframe 中的元素的文件時,不會搜尋這些元素。

    如果問題是原因3(位於iframe 或類似文件中),您需要查看iframe 中的文檔,而不是父文檔,也許可以透過取得iframe 元素並使用其< code>contentDocument 屬性來存取其文件(僅限同源)。本答案的其餘部分解決了前兩個原因。

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

    考慮以下範例:

    1

    2

    3

    sssccc

     

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

    div 出現在script之後。執行腳本時,該元素尚不存在,且 getElementById 將傳回 null

    jQuery

    #

    這同樣適用於所有 jQuery 選擇器。如果您拼字錯誤您的選擇器,或者您在它們實際存在之前嘗試選擇它們,則 jQuery 不會找到它們。

    一個額外的問題是當找不到 jQuery 時,因為您載入了沒有協定的腳本並且正在從檔案系統執行:

    1

    sssccc

    此語法用於允許腳本透過 HTTPS 在協定為 https:// 的頁面上加載,並在協定為 http:// 的頁面上載入 HTTP 版本

    它有一個不幸的副作用,就是嘗試載入 file://somecdn.somewhere.com...

    但失敗

    解決方案

    在呼叫 getElementById(或任何與此相關的 DOM 方法)之前,請確保您要存取的元素存在,即 DOM 已載入。

    只需將 JavaScript 放在對應的 DOM 元素之後即可確保這一點

    1

    2

    3

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

     

    sssccc

    在這種情況下,您也可以將程式碼放在結束正文標記 () 之前(所有 DOM 元素在執行腳本時都可用)。

    其他解決方案包括監聽load [MDN]##DOMContentLoaded #[MDN] 事件。在這些情況下,將 JavaScript 程式碼放置在文件中的哪個位置並不重要,只需記住將所有 DOM 處理程式碼放置在事件處理程序中即可。

    範例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    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() [文件]。所有影響 DOM 元素的 jQuery 程式碼都應該位於該事件處理程序內。

    事實上,

    jQuery 教學明確指出:

    1

    2

    // do stuff when DOM is ready

    });

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

    1

    2

    3

    $(function() {

        // do stuff when DOM is ready

    });

    兩者是等價的。

    回覆
    0
  • P粉275883973
  • 取消回覆