当前位置: 首页 > 面试题库 >

为什么jQuery或诸如getElementById之类的DOM方法找不到元素?

赫连俊悟
2023-03-14
问题内容

什么是可能的原因document.getElementById$("#id")或任何其他DOM方法/ jQuery选择没有找到的元素?

问题示例包括:

  • jQuery默默地未能绑定事件处理程序
  • jQuery的“吸气”方法(.val().html().text())返回undefined
  • 返回标准DOM方法会null导致以下几种错误:

未捕获的TypeError:无法设置为null的属性“ …”未捕获的TypeError:无法读取为null的属性“ …”

最常见的形式是:

未捕获的TypeError:无法将属性’onclick’设置为null

未捕获的TypeError:无法读取null的属性’addEventListener’

未捕获的TypeError:无法读取null的属性“样式”


问题答案:

运行脚本时,您要查找的元素不在[DOM中]。

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

考虑以下标记;脚本#1找不到,<div>而脚本#2成功:

<script>

  console.log("script #1: %o", document.getElementById("test")); // null

</script>

<div id="test">test div</div>

<script>

  console.log("script #2: %o", document.getElementById("test")); // <div id="test" ...

</script>

那你该怎么办?您有几种选择:

在结束body标记之前,将脚本进一步移至页面下方。以这种方式组织的文档的其余部分在执行脚本之前已被解析:

<body>

  <button id="test">click me</button>

  <script>

    document.getElementById("test").addEventListener("click", function() {

      console.log("clicked: %o", this);

    });

  </script>

</body><!-- closing body tag -->

注意:将脚本放在底部通常被认为是最佳实践。

选项2:jQuery的 ready()

使用以下命令将脚本推迟到DOM被完全解析为止ready()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

  $(document).ready(function() {

    $("#test").click(function() {

      console.log("clicked: %o", this);

    });

  });

</script>

<button id="test">click me</button>

注意:您可以简单地绑定到[DOMContentLoaded]或, 但是每个都有其警告。jQuery
提供了一种混合解决方案。window.[onload](https://developer.mozilla.org/en- US/docs/Web/API/window.onload?redirect=no)[ready()]

选项3:Event Delegation

Event Delegation的优势在于,它们可以处理以后在以后添加到文档中的后代元素中的事件。

当一个元素引发一个事件时(假设它是一个冒泡事件,并且没有任何东西阻止其传播),则该元素祖先中的每个父html" target="_blank">对象也会接收到该事件。这使我们能够将处理程序附加到现有元素,并在事件从其后代冒泡时进行采样,甚至是附加处理程序后添加的事件。我们要做的就是检查事件以查看事件是否由所需的元素引发,如果是,请运行我们的代码。

jQuery
on()为我们执行了该逻辑。我们只需提供一个事件名称,所需后代的选择器和事件处理程序即可:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

  $(document).on("click", "#test", function(e) {

    console.log("clicked: %o",  this);

  });

</script>

<button id="test">click me</button>

注意:通常,此模式是为加载时不存在的元素保留的, 或者是
为了避免附加大量的处理程序。值得指出的是,尽管我已经附加了一个处理程序document(出于演示目的),但您应该选择最近的可靠祖先。

选项4:defer属性

使用的defer属性<script>

[
defer,一个Boolean属性,]设置为向浏览器指示脚本应在文档解析后但在fire之前执行DOMContentLoaded

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>

<button id="test">click me</button>

作为参考,这是该外部脚本的代码:

document.getElementById("test").addEventListener("click", function(e){
   console.log("clicked: %o", this); 
});

注意:该defer属性 看起来 确实像是魔术子弹, 但请 注意以下几点很重要…
1. defer仅可用于外部脚本,即:具有src属性的脚本。
2.注意[浏览器支持],即:IE <10中的错误实现



 类似资料:
  • 我看到一个错误消息(uncattle typeerror:Cannot read property'add eventlistener'为null)我想问题是(getElementsByTagName)但无论如何它无法到达元素我想要的问题是什么

  • 当我加上 遇到错误 找不到DefaultConfig_Enterprise{name=main,dimension=null,minsdkversion=defaultapiversion{mapilevel=14,mcodeName='null'},targetsdkversion=defaultapiversion{mapilevel=30,mcodeName='null'},rendersc

  • 我试图找到这个按钮并点击它。但我得到了这个错误: 我注意到它正在寻找不同的字符串bc它在类名前面添加了这个点。这是问题吗? 非常感谢。

  • 本文向大家介绍jQuery中DOM树操作之复制元素的方法,包括了jQuery中DOM树操作之复制元素的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到复制元素的操

  • 问题内容: 我在Java中使用DOM解析器将子节点添加到现有节点中。 我的XML是 有什么方法可以直接在现有节点下添加子节点?我可以使用这样的东西吗? 我的密码 问题答案: 是专门用于按其属性检索DOM元素。尝试以下方法: 有关检索DOM节点的其他方法,请查看和。

  • 本文向大家介绍JQuery查找DOM节点的方法,包括了JQuery查找DOM节点的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用D