Warum kann jQuery oder getElementById das Element nicht finden?

Question

Was sind die möglichen Gründe, warum das Element von

document.getElementById、$("#id") oder einer anderen DOM-Methode/jQuery-Selektor nicht gefunden werden kann?

Beispielfragen sind:

• jQuery kann Ereignishandler stillschweigend nicht binden
• jQuery „Getter“-Methode (.val()、>.html()、.text()) 返回 undefined
• Standard-DOM-Methoden, die null zurückgeben, führen zu folgendem Fehler:

Uncaught TypeError: Die Nulleigenschaft „...“ kann nicht festgelegt werden

Nicht abgefangener TypeError: Die Eigenschaft kann nicht auf Null gesetzt werden (Einstellung '...')

Nicht erfasster TypeError: Die Eigenschaft „…“ von null kann nicht gelesen werden

Nicht erfasster TypeError: Eigenschaft von Null kann nicht gelesen werden (lesen Sie „...“)

Die häufigste Form ist:

Uncaught TypeError: Die Eigenschaft „onclick“ kann nicht auf null gesetzt werden

Nicht erfasster TypeError: Die Eigenschaft „addEventList ener“ von null kann nicht gelesen werden

Nicht erfasster TypeError: Die Eigenschaft „style“ von null kann nicht gelesen werden

Answer 1

简短：因为您要查找的元素在文档中尚不存在。

---

对于这个答案的其余部分，我将使用 例如 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 元素的任何调用都将失败。

考虑以下示例：

div 出现在script之后。执行脚本时，该元素尚不存在，并且 getElementById 将返回 null。

jQuery

这同样适用于所有 jQuery 选择器。如果您拼写错误您的选择器，或者您在它们实际存在之前尝试选择它们，则 jQuery 不会找到它们。

一个额外的问题是当找不到 jQuery 时，因为您加载了没有协议的脚本并且正在从文件系统运行：

此语法用于允许脚本通过 HTTPS 在协议为 https:// 的页面上加载，并在协议为 http:// 的页面上加载 HTTP 版本

它有一个不幸的副作用，即尝试加载 file://somecdn.somewhere.com...

但失败

---

解决方案

在调用 getElementById（或任何与此相关的 DOM 方法）之前，请确保您要访问的元素存在，即 DOM 已加载。

只需将 JavaScript 放在相应的 DOM 元素之后即可确保这一点

在这种情况下，您还可以将代码放在结束正文标记 () 之前（所有 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
});

两者是等价的。

Answer 2

您尝试查找的元素不在 DOM< /a> 当你的脚本运行时。

依赖 DOM 的脚本的位置可能对其行为产生深远的影响。浏览器从上到下解析 HTML 文档。元素被添加到 DOM 中，并且脚本（通常）在遇到它们时执行。 这意味着顺序很重要。通常，脚本无法找到标记中稍后出现的元素，因为这些元素尚未添加到 DOM。

考虑以下标记；脚本 #1 找不到

，而脚本 #2 成功：

test div