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(“测试”);// 脚本运行时,您试图查找的元素不在中
依赖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
});
两者都是等效的。简短明了:,因为您要查找的元素在文档中还不存在
对于本答案的其余部分,我将使用getElementById
作为示例,但这同样适用于和任何其他选择元素的DOM方法
可能的原因
元素可能不存在的原因有两个:
中确实不存在具有传递的ID的元素
$(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