为什么 jQuery 或像 getElementById 这样的 DOM 方法无法定位元素？

Question

document.getElementById、$("#id")或任何其他DOM方法/jQuery选择器找不到元素的可能原因是什么？示例问题包括：jQuery默默地无法绑定事件处理程序jQuery“getter”方法（.val()、.html()、.text())返回undefined返回null的标准DOM方法会导致以下错误：未捕获类型错误：无法设置null属性“...”未捕

P粉938936304 · Answer

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

对于这个答案的其余部分，我将使用例如 getElementById ，但这同样适用于 getElementsByTagName, < code>querySelector，以及选择元素的任何其他 DOM 方法。

可能的原因

元素可能不存在的三个原因：

文档中确实不存在具有传递的 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"))。
您调用 getElementById 时该元素不存在。
即使您可以在页面上看到该元素，但该元素并不在您正在查询的文档中，因为它位于 iframe 中（这是它自己的文档）。当您搜索包含 iframe 中的元素的文档时，不会搜索这些元素。

如果问题是原因 3（位于 iframe 或类似文件中），您需要查看 iframe 中的文档，而不是父文档，也许可以通过获取 iframe 元素并使用其 < code>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
});

两者是等价的。

P粉122932466 · Answer

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

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

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

，而脚本 #2 成功：

sssccc
test div
sssccc

为什么 jQuery 或像 getElementById 这样的 DOM 方法无法定位元素？

全部回复(2)我来回复