有时候。在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]之类的东西吧?我在之前也这样觉得的,但实际执行结果。却是例如以下效果:

咦?怎么第一个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(){}

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

  1. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  3. JavaScript 实现彩票中随机数组的获取

    1.效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. UNIX文件的权限之“设置用户ID位”

    用stat函数可以获取一个文件的状态信息,原型是这样的: int stat(const char *path, struct stat *buf); 其中结构体stat的结构: struct stat ...

  5. linux系统学习笔记:无死角理解保存的设置用户ID,设置用户ID位,有效用户ID,实际用户ID

    一.基本概念 实际用户ID(RUID):用于标识一个系统中用户是谁,一般是在登录之后,就被唯一的确定,就是登录的用户的uid. 有效用户ID(EUID):用于系统决定用户对系统资源的权限,也就是说当用 ...

  6. 实际用户ID,有效用户ID,保存的设置用户ID

    Unix中常见的几个概念,下面做一个解释. 首先需要明确一点,这几个概念都是和进程相关的. real user ID表示的是实际上进程的执行者是谁,effective user ID主要用于校验该进程 ...

  7. APUE学习笔记——8.11 实际用户ID、有效用户ID、设置用户ID

    用户ID的基本概念 在Unix系统中,很多操作涉及到权限问题,这些权限涉及到用户ID和组ID的概念.     组ID和用户ID的原理和相关内容是类似的.下面介绍用户ID.     我们常见见到三种关于 ...

  8. js/jq和a标签(刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式)//js/jq分页

    1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...

  9. arcgis for javascript 添加featurelayer,设置地图最大最小等级

    转自原文arcgis for javascript 添加featurelayer,设置地图最大最小等级 var map; var livingCenter; var livingCenterUrl = ...

随机推荐

  1. TSS 任务状态段 详解

    http://blog.163.com/di_yang@yeah/blog/static/86118492201222210725146/1 什么是TSS TSS 全称task state segme ...

  2. ANDROID_MARS学习笔记_S01原始版_018_SERVICE之Parcel

    一.代码 1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

  3. Altium Designer 常用快捷键总结

    原理图:1:按住shift  拖动某个元件,可快速复制.2:按住鼠标滚轮 鼠标上下滑动 放大缩小.3:按住Ctrl 按住鼠标右键 鼠标上下滑动也放大缩小.4:按住Ctrl 拖动某个元件 可以移动位置 ...

  4. Android Service的生命周期

    service的生命周期,从它被创建开始,到它被销毁为止,可以有两条不同的路径: A started service 被开启的service通过其他组件调用 startService()被创建. 这种 ...

  5. Android RelativeLayout

    RelativeLayout为相对布局,这种布局内的组件总是相对兄弟组件.父容器来确定的,在定义控件的位置时,需要参照其他控件的位置. 这个程序实现了一个梅花的相对布局 <?xml versio ...

  6. 转:HTTP请求(GET、POST和soap区别)和响应

    一直对Http请求和SOAP请求不是太理解,只是知道SOAP是基于Http的,并且增加了很多XML标签,SOAP经常用在WebService中,比如在C#中创建一个WebService,然后在客户端生 ...

  7. x+2y+3z=n的非负整数解数

    题目:给一个正整数n,范围是[1,10^6],对于方程:x+2y+3z = n,其中x,y,z为非负整数,求有多少个这样的三元组 (x,y,z)满足此等式. 分析:先看x+2y=m,很明显这个等式的非 ...

  8. php 模拟斗地主发牌简单易懂

    闲来无聊,就写了这个方法,也算是熟悉下php的数组操作,还请各位大神多指教.$arr 数组,好像有点问题,应该 2=>'方片2',3=>'梅花2',4=>'红心2',5=>'黑 ...

  9. WCF - Windows Service Hosting

    WCF - Windows Service Hosting The operation of Windows service hosting is a simple one. Given below ...

  10. Linux kernel 拒绝服务漏洞

    漏洞名称: Linux kernel 拒绝服务漏洞 CNNVD编号: CNNVD-201311-020 发布时间: 2013-11-05 更新时间: 2013-11-05 危害等级:    漏洞类型: ...