一个选项卡引发的血案

原创 yehaikuo111 随笔 js复习 224阅读 2018-09-13 10:44:02 举报

前几天有个小伙伴做了个选项卡,让我帮忙看看出了什么问题,代码如下

大家可以看一下现象,再看一下代码,然后上一段我帮她改正的代码。

我当时一下找到了原因,是因为她把原本按钮的class名字btn也给清空了(当时我以为错误的原因是她是根据class名字获取的btn,所以清楚class名字后就获取不到btn了(这个想法是错误的))。
因为如果获取不到btn了怎么可能还会有点击事件呢。。。。这时候我又在想了问题出在哪呢,点击居然同时出现了多个内容框,就找控制显示的这段:aCont[this.index].className='content on',想想也不对,如果我全部隐藏后,用这段代码就算index错乱了,也只能使其中一个显示啊,那肯定就是控制显示的那段代码有问题了

控制显示的代码是放在循环内的,所以很有可能就是循环出了问题,既然是循环的话那很有可能就是i或者j有问题,而i和j都是和btn.length有关联的,所以我就有了如下调试代码:

大家可以看到btn的length变了,这就很奇怪了,我既然每个按钮都能点说明三个按钮的点击事件没问题,然后唯一变化的是每个按钮的class名字清空了,而我每个按钮又是根据class名字获取的而且length变成了0,这是能联想到什么呢?我的想法是:通过docuemnt.getElementsByClassName获取的DOM属性是实时更新的。

不知道大家有没有想到还有一种获取DOM的方法,我们来看看有没有区别

大家可以看到,虽然清空class导致按钮的样式有点问题,但是选项卡的功能没问题,并且length也一直是3,说明DOM如果是根据document.querySelectorAll来获取,那么属性不会实时更新,或者说是被缓存起来的

以上是本人的一些个人想法,如有错误,感谢大家指正,和大家共同进步~~~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复