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

JavaScript

村村A

2020-03-13

什么是可能的原因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的属性“样式”

第1375篇《为什么jQuery或诸如getElementById之类的DOM方法找不到元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小宇宙神无 2020.03.13

问题是执行javascript代码时未创建dom元素“ speclist”。因此，我将javascript代码放入一个函数中，并在body onload事件中调用了该函数。

function do_this_first(){
   //appending code
}

<body onload="do_this_first()">
</body>
LEY小卤蛋 2020.03.13

基于ID的选择器不起作用的原因

  1. 指定ID的元素/ DOM尚不存在。
  2. 该元素存在，但未在DOM中注册（对于从Ajax响应动态追加的HTML节点而言）。
  3. 存在多个具有相同ID的元素，这会导致冲突。

解决方案

  1. 尝试在元素声明后访问元素，或者使用类似 $(document).ready();

  2. 对于来自Ajax响应的元素，请使用.bind()jQuery方法。较旧版本的jQuery具有.live()相同的功能。

  3. 使用工具（例如，用于浏览器的webdeveloper插件）查找重复的ID并将其删除。

LGil 2020.03.13

正如@FelixKling指出的那样，最可能的情况是您要查找的节点不存在（尚未）。

但是，现代开发实践通常可以使用DocumentFragments或直接直接分离/重新附加当前元素来操纵文档树之外的文档元素。这样的技术可以用作JavaScript模板的一部分，或避免在所涉及的元素发生重大更改时避免过多的重画/重排操作。

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

同样，尽管如此，很可能您正在寻找的元素还没有在文档中（尚未），您应该按照Felix的建议进行操作。但是，您还应该意识到，这不再是元素可能无法找到（临时或永久）的唯一原因。

Green老丝Itachi 2020.03.13

如果您尝试访问的元素位于内，iframe而您尝试在上下文之外进行访问，iframe这也会导致其失败。

如果要在iframe中获取元素，可以在这里找到方法。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android