示例
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 /**getElementsByTagName按元素标签查询**/ 33 var el = document.getElementsByTagName('li'); 34 for(var i=0;i<el.length;i++){ 35 el[i].className="mycolor"; 36 } 37 38 } 39 40 </script> 41 </body> 42 </html>