為什麼 jQuery 或像 getElementById 這樣的 DOM 方法無法定位元素？

Question

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

範例問題包括：

• jQuery 默默地無法綁定事件處理程序
• jQuery「getter」方法（.val()、.html()、.text()) 傳回undefined
#
• 傳回 null 的標準 DOM 方法會導致下列錯誤：

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

# 未捕獲的類型錯誤：無法設定 null 的屬性（設定“...”）

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

# 未捕獲的類型錯誤：無法讀取 null 的屬性（讀取“...”）

最常見的形式是：

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

未捕獲的類型錯誤：無法讀取 null 的屬性“addEventListe ner”

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

Answer 1

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

---

對於這個答案的其餘部分，我將使用例如getElementById ，但這同樣適用於getElementsByTagName#, 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 元素並使用其contentDocument 屬性來存取其文件（僅限同源）。本答案的其餘部分解決了前兩個原因。

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

考慮以下範例：

sssccc

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

jQuery

#

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

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

sssccc

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

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

但失敗

---

解決方案

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

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

sssccc

在這種情況下，您也可以將程式碼放在結束正文標記 (

Answer 2

您嘗試尋找的元素不在 DOM 當你的腳本執行時。

依賴 DOM 的腳本的位置可能對其行為產生深遠的影響。瀏覽器從上到下解析 HTML 文件。元素被添加到 DOM 中，並且腳本（通常）在遇到它們時執行。 這意味著順序很重要。 通常，腳本無法找到標記中稍後出現的元素，因為這些元素尚未新增到 DOM。

考慮以下標記；腳本 #1 找不到

，而腳本 #2 成功：

sssccc
test div
sssccc