【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
有时候。在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的更多相关文章
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript querySelector和getElementById通过id获取元素的区别
querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...
- JavaScript 实现彩票中随机数组的获取
1.效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- UNIX文件的权限之“设置用户ID位”
用stat函数可以获取一个文件的状态信息,原型是这样的: int stat(const char *path, struct stat *buf); 其中结构体stat的结构: struct stat ...
- linux系统学习笔记：无死角理解保存的设置用户ID，设置用户ID位，有效用户ID，实际用户ID
一.基本概念 实际用户ID(RUID):用于标识一个系统中用户是谁,一般是在登录之后,就被唯一的确定,就是登录的用户的uid. 有效用户ID(EUID):用于系统决定用户对系统资源的权限,也就是说当用 ...
- 实际用户ID，有效用户ID，保存的设置用户ID
Unix中常见的几个概念,下面做一个解释. 首先需要明确一点,这几个概念都是和进程相关的. real user ID表示的是实际上进程的执行者是谁,effective user ID主要用于校验该进程 ...
- APUE学习笔记——8.11 实际用户ID、有效用户ID、设置用户ID
用户ID的基本概念 在Unix系统中,很多操作涉及到权限问题,这些权限涉及到用户ID和组ID的概念. 组ID和用户ID的原理和相关内容是类似的.下面介绍用户ID. 我们常见见到三种关于 ...
- js/jq和a标签（刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式）//js/jq分页
1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...
- arcgis for javascript 添加featurelayer,设置地图最大最小等级
转自原文arcgis for javascript 添加featurelayer,设置地图最大最小等级 var map; var livingCenter; var livingCenterUrl = ...
随机推荐
- UVA 10765 Doves and bombs
给定一个无向的连通图,要求每个点去掉后连通分量的数目,然后输出连通分量最多的m个点. 分析: 先求出双连通分量,然后统计所有双连通分量中割顶出现的次数,最后求出的就是割顶去掉后剩下的双连通的数目,对于 ...
- 【Quick 3.3】资源脚本加密及热更新(三)热更新模块
[Quick 3.3]资源脚本加密及热更新(三)热更新模块 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 lua相对于c++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...
- lunux下查看文件文件夹大小的命令
使用ls -lht命令显示当前目录下的所有文件,其中有一列就是显示这个文件的大小.如果要看一个文件夹的大小,可以用du -sh *
- python 检测文件编码等
参考:http://my.oschina.net/waterbear/blog/149852 chardet模块,能够实现文本编码的检查, 核心代码: import chardet chardet.d ...
- IBM Rational-完整的软件工程解决方案工具集
IBM,即国际商业机器公司,1911年创立于美国,是全球最大的信息技术和业务解决方案公司,其业务遍及全球170多个国家和地区.IBM软件分为五个部分,其中Rational系列是专门针对软件工程的软件工 ...
- 卸载Visual Studio Code后删除右键Open with Code…
Win+R,输入 regedit ,点击确认,进入注册表编辑器 Ctrl+F,搜索 Ticino ,将搜索出来的Ticino都删除就行了
- jquery easyui datebox 的使用
看了jquery easyui databox的官方api,还可以加入倒是很简单,但是想要获得他的值和修改值就很费劲,不知道怎么弄,试了n次终于搞定.这里总结一下,供有相同问题的人查询. 1. 官方a ...
- google官方提供的编译android源码的环境初始化，Initializing a Build Environment
原文网址:http://source.android.com/source/initializing.html Initializing a Build Environment IN THIS DOC ...
- 兼容ie\firefox\chrome的cursor
cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标. 但用FireFox浏览时才注意到使用cursor:hand在FireFox.chorme里并被支持.cursor ...
- Android 开发性能优化之SparseArray(一)
多数Android开发者都知道在Android中可以使用HashMap来映射一种对应关系,在java开发中HashMap也算是一种很重要的数据存储结构.然后很多人在Android开发中多数都会用Has ...