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

document.getElementById

、

$（“#id”）

或任何其他DOM方法/jQuery选择器找不到元素的可能原因是什么

示例问题包括：

• jQuery静默绑定事件处理程序失败
• jQuery“getter”方法（

  .val（）

  ，

  .html（）

  ，

  .text（）

  ）返回

  未定义的
  

• 返回

  null

  的标准DOM方法会导致以下任何错误：

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

最常见的形式有：

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

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

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

---

脚本运行时，您试图查找的元素不在中

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

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

，而脚本#2成功：

console.log（“脚本#1:%o”，document.getElementById（“测试”）；//无效的
试验室
console.log（“脚本#2:%o”，document.getElementById（“测试”）；// 简短：因为您要查找的元素在文档中还不存在


对于本答案的其余部分，我将使用
getElementById
作为示例，但这同样适用于和任何其他选择元素的DOM方法

可能的原因

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

文档中确实不存在具有传递的ID的元素。您应该仔细检查传递给
getElementById
的ID是否与（生成的）HTML中现有元素的ID匹配，并且没有拼写错误（ID区分大小写！）

顺便说一句，在实现
querySelector（）
和
querySelectorAll（）
方法的中，CSS样式表示法用于通过元素的
id
检索元素，例如：
document.querySelector（“#elementID”）
，与通过
document.getElementById（'elementID'）
下的
id
检索元素的方法相反；在第一种情况下，
#
字符是必不可少的，在第二种情况下，它将导致无法检索元素

在调用
getElementById
时，元素不存在

后一种情况很常见。浏览器从上到下解析和处理HTML。这意味着在DOM元素出现在HTML中之前对该DOM元素的任何调用都将失败

考虑以下示例：

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

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

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


解决方案

在调用
getElementById
（或任何DOM方法）之前，请确保要访问的元素存在，即加载了DOM

这可以通过简单地将JavaScript放在相应的DOM元素之后来确保

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

有关事件处理和浏览器差异的更多信息，请参阅

jQuery

首先确保jQuery已正确加载。要查明是否找到jQuery文件，并更正URL（如在开头添加
http:
或
https:
方案，请调整路径等）

监听
load
/
DOMContentLoaded
事件正是jQuery所做的。影响DOM元素的所有jQuery代码都应该在该事件处理程序中

事实上，报告明确指出：

当我们使用jQuery读取或操作文档对象模型（DOM）时，几乎所有的操作都是如此，我们需要确保在DOM准备好后立即开始添加事件等

为此，我们为文档注册一个就绪事件

$(document).ready(function() {
   // do stuff when DOM is ready
});

或者，您也可以使用速记语法：

$(function() {
    // do stuff when DOM is ready
});

两者都是等价的。
正如@FelixKling指出的，最有可能的情况是，您正在寻找的节点不存在（尚未）

然而，现代开发实践通常可以使用DocumentFragments或直接分离/重新附着当前元素来操作文档树之外的文档元素。这些技术可以作为JavaScript模板的一部分使用，也可以在大量修改相关元素时避免过度的重新绘制/回流操作

类似地，在现代浏览器中推出的新“影子DOM”功能允许元素成为文档的一部分，但不能通过document.getElementById及其所有同级方法（querySelector等）进行查询。这样做是为了封装功能，特别是隐藏功能

不过，您要查找的元素很可能（尚未）出现在文档中，您应该按照Felix的建议进行操作。但是，您还应该意识到，这越来越不是元素不可编译（临时或永久）的唯一原因。
基于id的选择器不起作用的原因

指定id的元素/DOM不存在
$(document).ready(function() {
   // do stuff when DOM is ready
});

$(function() {
    // do stuff when DOM is ready
});

  <div id="foo"></div>

  // Error, selected element will be null:
  document.getElementById('#foo')
  // Fix:
  document.getElementById('foo')

  <div class="bar"></div>

  // Error, selected element will be undefined:
  document.getElementsByClassName('.bar')[0]
  // Fix:
  document.getElementsByClassName('bar')[0]

  <div class="baz"></div>

  // Error, selected element will be null:
  document.querySelector('baz')
  $('baz')
  // Fix:
  document.querySelector('.baz')
  $('.baz')

  <div class="foo bar"></div>

  <div class="foo" data-bar="someData"></div>

  <div class="parent">
    <span data-username="bob"></span>
  </div>

  <div class="result"></div>

  // Error, selected element will be null:
  document.querySelector('.results')
  $('.Result')
  // Fix:
  document.querySelector('.result')
  $('.result')

$(selector)
document.querySelector
document.querySelectorAll
document.getElementsByClassName
document.getElementsByTagName
document.getElementById