示例
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>