JS中querySelectorAll的作用

//外部頁切換
    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