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

  • Z时代
  • 2024-01-10
  • 分类：问答

什么是可能的原因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>

那你该怎么办？您有几种选择：

选项1：移动脚本

在结束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的优势在于，它们可以处理以后在以后添加到文档中的后代元素中的事件。

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

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中的错误实现

以上是 为什么jQuery或诸如getElementById之类的DOM方法找不到元素？ 的全部内容， 来源链接： utcz.com/qa/425990.html

回到顶部