示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>查詢多個</title> 5 <meta charset="UTF-8"> 6 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"> --> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <style> 9 .mycolor{ 10 color:#fff; 11 background-color: #ddd; 12 } 13 .steam{ 14 text-decoration:initial; 15 } 16 </style> 17 </head> 18 <body> 19 <ul id="ul"> 20 <li id="a">油條</li> 21 <li id="b" class="steam">包子</li> 22 <li id="c" class="steam">米餃</li> 23 <li id="d"><a>魚粉</a></li> 24 </ul> 25 26 <!--按鈕 onclick當點擊按鈕時，執行一段JavaScript代碼--> 27 <button onclick="gaibianyangshi()">點擊</button> 28 29 <script> 30 31 function gaibianyangshi() { 32 /**querySelectorAll查詢選擇器全部**/ 33 var el = document.querySelectorAll('li.steam'); 34 el[0].className='mycolor'; 35 el[1].className='mycolor'; 36 37 } 38 39 </script> 40 </body> 41 </html>