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

有时候,在JavaScript中,即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就开始想document是否写错之类的,其实根本就不是你的代码的大小写出现了问题,主要是你还没有搞清楚直接写在<script></script>之间东西与写在window.οnlοad=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.οnlοad=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.οnlοad=function(){},要求这段脚本必须在所有的网页东西读完才能运行,二是,直接把这段脚本放在最下面</html>之后,这样就可以直接放在<script></script>之中了,脚本脚本,处于脚部的网页运行剧本,望文生义都知道要放在网页的脚部了。这也是我很不爽一些人老是爱在<head></head>写脚本的原因。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit buttons(提交按钮) 例如可通过下列按钮激活change()文件: <Form> <Input type="button" Value="" onClick="change()"> </Form> 2.onLoad页面加载事件:当页面加载时,自动调用函数(方法)。注意:此方法只能写在<body>标签之中! 3.onScroll窗口滚动事件:当页面滚动时调用函数。注意:此事件写在方法的外面,且函数名(方法名)后不加括号!例:window.onscroll=move; 4.onBlur失去焦点事件:当光标离开文本框是触发调用函数。 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。 5.onFocus事件:光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时,产生该事件。 6.onChange事件:文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。例: <Form> <Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form> 7.onSubmit事件:属于<form>表单元素,写在<form>表单标签内。语法:onSubmit=”return 函数名()” 8.onKeyDown事件:在输入框中按下键盘上的任何一个键时,都会触发事件,调用函数。注意:此事件写在方法的外面,且函数名(方法名)后不加括号!例:document.onkeydown=函数名()。 9.setTimeout(“函数名()”,间隔时间(以毫秒为单位)); 10.clearTimeout(对象) 清除已设置的setTimeout对象 鼠标相关事件: 1.onMouseOver:鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域之内,无论怎样移动斗志触发一次函数。 2.onMouseOut:鼠标离开某对象范围时,触发事件调用函数。 3.onMouseMove: 鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域之内,只要一动一次就出发一次事件调用一次函数。 4.onmouseup 当鼠标松开 5.onmousedown 当鼠标按下键 document对象常用的方法: 1.document.getElementById():通过id获得唯一的一个HTML元素,id时,通过name查找 2.document.getElementByName():获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用方法: Var a=new Date(); //创建a为一个新的时期对象 y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值(0-11) d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当前星期值 h=a.getHours(); //获取当前小时数 m1=a.getMinutes(); //获取当前分钟数 s=a.getSeconds(); //获取当前秒钟数

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值