document.getElementById
、$("#id")
oder einer anderen DOM-Methode/jQuery-Selektor nicht gefunden werden kann?
Beispielfragen sind:
.val()
、.html()
、.text()
) 返回undefined
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 „addEventListener“ von null kann nicht gelesen werden
Nicht erfasster TypeError: Die Eigenschaft „style“ von null kann nicht gelesen werden
简短:因为您要查找的元素在文档中尚不存在。
对于这个答案的其余部分,我将使用例如
getElementById
,但这同样适用于getElementsByTagName
,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
元素并使用其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 当你的脚本运行时。
依赖 DOM 的脚本的位置可能对其行为产生深远的影响。浏览器从上到下解析 HTML 文档。元素被添加到 DOM 中,并且脚本(通常)在遇到它们时执行。这意味着顺序很重要。通常,脚本无法找到标记中稍后出现的元素,因为这些元素尚未添加到 DOM。
考虑以下标记;脚本 #1 找不到
,而脚本 #2 成功: