原生DOM選擇器querySelector與querySelectorAll區別及用法
阿新 • • 發佈：2019-02-12
<body> <div id="test"> <p class="text">1</p> <p class="text">2</p> <p>3</p> <p>4</p> </div> <script> /* querySelector與querySelectorAll是H5提供的選擇器，可用document.querySelector()選擇元素操作節點， 用法與jQuery裡的$()選擇器類似,但有些細微區別: 1. querySelector只能選擇第一個匹配的節點； 2. querySelectorAll可以選擇多個節點,以","分隔開,返回的是個陣列； 其他高階用法與jq基本一致,如後代選擇器document.querySelector() document.querySelector("#app1>.item1"); 3.document.getElementsByClassName('box');獲取的是一個集合再進行for迴圈操作(s); */ var oDiv = document.querySelector('#test'); var oP = document.querySelectorAll('p')[0];//只選中第一個p var oPs1 = oDiv.querySelectorAll('p');//oDiv下面的所有P var oPs2 = document.querySelectorAll('p.text');//只選中p中class="text" var oPs3 = document.querySelectorAll('#test>p');//選中id為test下面的所有P //oPs1 = oPs3 兩種選擇方式相同 oDiv.style.background = 'red'; oP.style.background = 'yellow'; for(var i=0;i<oPs1.length;i++){ oPs1[i].style.background = 'yellow'; } for(var i=0;i<oPs2.length;i++){ oPs2[i].style.background = 'pink'; } for(var i=0;i<oPs3.length;i++){ oPs3[i].style.background = 'blue'; } </script> </body>