Warum können jQuery- oder DOM-Methoden wie getElementById keine Elemente finden?
P粉720716934
P粉720716934 2023-10-15 15:40:06
0
2
478
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, dienullzurü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


P粉720716934
P粉720716934

Antworte allen (2)
P粉938936304

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


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

考虑以下示例:

           

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

jQuery

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

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


          

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

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

但失败

解决方案

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

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

           

在这种情况下,您还可以将代码放在结束正文标记 (

    P粉122932466

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

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

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

    ,而脚本 #2 成功:

                   
    test div

      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!