JavaScript做DOM操作的时候一定要注意操作的DOM是否已经加载

大家都知道要想操作DOM,要等DOM加载完后才可以操作,我们一般会写window.onload=function(){};

如果使用JQuery,还可以使用

$(function(){
//code
});

这些是已经很熟悉的了,但是如果是个动态更新的DOM呢?这个时候要注意了,绑定事件和操作DOM都要等到这点DOM加载到整个DOM树中。

比如我今晚做的一个弹出层,背景变暗,弹出的层是通过XHR获得的,而且这个层里面我还需要绑定事件,还需要操作DOM,开始我犯傻的就直接和其他时间绑定写在一起了,试了一下没有反应,但是firebug也没报错。监视了一下,发现时间没绑定上。于是恍然大悟,因为我绑定的时候,这点DOM还没加载过来,当然就不去起作用了。

那应该把这个绑定时间写在上面位置呢?因为我用的是XHR获得那个层的内容,并且使用了jQuery,用$.ajax( success: function(){})来判断是否XHR成功,然后在这个function里面写入把获取到的内容加入DOM树的语句,紧接着就可以写事件绑定代码了。这样写,就可以保证是在那片DOM加载成功后再绑定事件了。可以成功的操作了。

Jquery中$("#id")和document.getElementById("id")的区别

刚开始学习Jquery。遇到了一些困难。

我使用Jquery的$(“#id”)选择了<select>标签,然后用DOM的add方法插入<option>节点,失败,换用document.getElementByID就可以。一直以为Jquery的$方法返回的是DOM对象,搜索了一下才知道,原来是有差别的,看来是我看书的时候不认真造成的。

用Jquery选择的包装集返回的是Jquery对象,用document.getElementByID返回的却是DOM对象,既然对象不同,方法也就不能混用,所以我开始的时候使用add方法是没用的。这里有一篇文章详细讲解Jquery对象和DOM对象之间的转换。简单说来就是:Query对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)。

所以对于我遇到的问题,我只要使用$(“#id”)[0];就可以获得DOM对象了,就可以使用add方法了。

———————————update———————————————

用Jquery的时候,用.each()可以遍历包装集里面的DOM对象