我们知道,当我们将JS代码脚本放到<head></head>标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素的代码,而此时的DOM是不完整的,
所以我们通常的解决方法是将函数放入到window.onload里面去,window.load事件是网页加载完毕时会触发的一个事件,如果将我们的函数与之绑定,我们的函数也会在页面加载完毕之后执行.
如下代码:
这段代码在浏览器执行时就会报错,aa is null;因为在js获取id=target的div时,该div还没有加载完毕。所以我们需要这样来解决这个问题,代码如下:
这个时候代码正常输出:DIV; nodeName默认输出标签名的大写形式;
这似乎已经解决了我们的问题,但是不够perfect,如下代码:
这个时候任然会报错:dd id null;错误原因和上面一样;
解决办法有两个:
1、将需要绑定window.onload事件的两个函数写到一个匿名函数里面,在将该匿名函数与window.onload事件绑定,ok,问题解决!
但是这个方法只能解决需要绑定window.onload事件的函数较少的情况,一旦那些函数有很多,这个方法就不是很好!
asdas
2、这是一个弹性最佳的解决方案 不管你打算在页面加载完毕是执行多少个函数,他都能应付自如;代码如下:
12
上面的addOnloadEvent()方法解决了我们的问题,但是还不够全面,因为当需要绑定的方法过多时,我们就要写多条addOnLoadEvent(方法);所以为了减少代码量这里的代码还可以这样改,
代码如下:
12
这样就一定程度上减少了代码量,还便于管理方法的执行先后顺序。