Javascript 为什么jQuery或getElementById之类的DOM方法找不到该元素?
Javascript 为什么jQuery或getElementById之类的DOM方法找不到该元素?,javascript,jquery,dom,Javascript,Jquery,Dom,document.getElementById、$(“#id”)或任何其他DOM方法/jQuery选择器找不到元素的可能原因是什么 示例问题包括: jQuery静默绑定事件处理程序失败 jQuery“getter”方法(.val(),.html(),.text())返回未定义的 返回null的标准DOM方法会导致以下任何错误: 未捕获的TypeError:无法将属性“…”设置为null 未捕获的TypeError:无法读取null的属性“…” 最常见的形式有: 未捕获的TypeError:无
document.getElementById
、$(“#id”)
或任何其他DOM方法/jQuery选择器找不到元素的可能原因是什么
示例问题包括:
- jQuery静默绑定事件处理程序失败
- jQuery“getter”方法(
,.val()
,.html()
)返回.text()
未定义的
- 返回
的标准DOM方法会导致以下任何错误:null
脚本运行时,您试图查找的元素不在中 依赖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