【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

时间:2022-10-06 02:26:57

有时候。在JavaScript中。即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的。事实上根本就不是你的代码的大写和小写出现了问题。主要是你还没有搞清楚直接写在<script></script>之间东西与写在window.onload=function(){}里面的东西的差别究竟在哪里。

比方例如以下的很一段简单代码,在网页中除了一个ID为a,然后里面写了aaaa的图层div之外就再也没有其他东西了,在头部有一段写得“很规范”的脚本,本来就<script></script>就能够了,与<script type="text/javascript" language="javascript"></script>根本就没有差别的。免得有些人自以为很规范的纪律流。说是由于这个原因而导致以下的一系列的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onloadtest</title>
<script type="text/javascript" language="javascript">
alert(document.getElementById("a"));
window.onload=function(){
alert(document.getElementById("a").innerHTML);
}
</script>
</head>
<body>
<div id="a">aaaa</div>
</body>
</html>
<script>
alert(document.getElementById("a").innerHTML);
</script>

这段脚本首先要获取一个图层,然后再通过window.onload之后获得一个a图层的内容。预计非常多人以为第一行代码

alert(document.getElementById("a"));

会弹出类似于[Object:HTML ObjectElement]之类的东西吧?我在之前也这样觉得的,但实际执行结果。却是例如以下效果:

【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

咦?怎么第一个alert会弹出空啊?这是由于HTML在载入的时候,是一行一行地编译。动态编译的,它不是像C语言那样,一次性地编译整个程序。再给你执行的。也就是所谓的动态编译域与静态编译域的差别。因此,能够解释为什么Javascript读到错误会自己主动停止执行。也会出现此前我已经提到过的《【JavaScript】变量冲突是能够通过编译的》(点击打开链接)的问题。

回到正题上面来。開始,网页读到第一个alert脚本的时候。网页中根本就没有出现id为a的图层div!

所以不能获取是非常正常的。

解决方案有两个,一个是使用window.onload=function(){},要求这段脚本必须在全部的网页东西读完才干执行。二是。直接把这段脚本放在最以下</html>之后,这样就能够直接放在<script></script>之中了,脚本脚本,处于脚部的网页执行剧本,望文生义都知道要放在网页的脚部了。这也是我非常不爽一些人老是爱在<head></head>写脚本的原因。

当然,通过这个样例,你也要清楚,假设在头部引入javascript。类似<script src="js/jquery-1.11.1.js"></script>之类的,注意。假设引入的Javascript中出现要网页一開始就载入的javascript的话,必须把写着脚本写入window.onload=function(){}