示例
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 class="steam">包子</li> 22 <li class="steam">米饺</li> 23 <li><a id="d">鱼粉</a></li> 24 </ul> 25 26 <!--按钮 onclick当点击按钮时,执行一段JavaScript代码--> 27 <button onclick="gaibianyangshi()">点击</button> 28 29 <script> 30 31 function gaibianyangshi() { 32 /**parentNode查询父节点**/ 33 var el = document.getElementById('d'); 34 35 el.parentNode.className='mycolor'; 36 37 } 38 39 </script> 40 </body> 41 </html>