码迷,mamicode.com
首页 > Web开发 > 详细

JS中querySelectorAll的作用

时间:2019-06-16 12:05:55      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:function   var   ora   cli   btn   tle   获取   tor   span   

//外部页切换
    var clickme=document.getElementById(‘navbox‘).getElementsByTagName(‘button‘);
    var box=document.getElementById(‘itembox‘).querySelectorAll(‘.boxStyle‘);
    for(var i=0;i<clickme.length;i++){
        clickme[i].index=i;
        clickme[i].onclick=function(){
            for(var i=0;i<clickme.length;i++){
                clickme[i].className=‘navbtn‘;
                box[i].style.display=‘none‘;
            }
            this.className=‘navbtn active‘;
            box[this.index].style.display=‘block‘;
        }
    }
    //内部页切换
    var databox=document.getElementById(‘b1‘).getElementsByTagName(‘div‘);
    var message=document.getElementById(‘b2‘).getElementsByTagName(‘div‘);
    for(var i=0;i<databox.length;i++){
        databox[i].index=i;
        databox[i].onclick=function(){
            for(var i=0;i<databox.length;i++){
                databox[i].className=‘littlebox‘;
                message[i].style.display=‘none‘;
            }
            this.className=‘littlebox actives‘;
            message[this.index].style.display=‘block‘;
        }
    }    

 

 在我们编写Html页面时,如果遇到外部页面点击跳转并且内部页面也需要点击跳转时。单纯编写JS时所要抓取的dom对象就会容易出现问题,如我的外层页面之下的div中的div。都会被捕捉到,这样我们编写出的js点击切换页面的效果就会出现bug。

如何规避这种情况,我们可以使用

querySelectorAll

来解决这个问题。通过使用它来抓取当前拥有同样class样式的div,就会针对指向性的获取到该元素,从而规避这类bug

JS中querySelectorAll的作用

标签:function   var   ora   cli   btn   tle   获取   tor   span   

原文地址:https://www.cnblogs.com/CWJDD/p/11030215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!