JS中querySelectorAll的作用

Posted 2022-01-14 cwjdd

//外部页切换
    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