對於這個答案的其餘部分，我將使用例如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

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

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

事實上，

jQuery 教學明確指出：

// do stuff when DOM is ready
});

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

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

兩者是等價的。

點贊 +0

新增回覆 关闭回复

P粉720716934

回覆

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

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

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

sssccc
test div
sssccc

點贊 +0

新增回覆 关闭回复

P粉720716934

回覆