查找兄弟元素 previousSibling nextSibling
示例
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="ali">油条</li><li id="bli">包子</li><li id="cli">米饺</li><li id="dli"><a id="yufen">鱼粉</a></li> 21 </ul> 22 23 <!--按钮 onclick当点击按钮时，执行一段JavaScript代码--> 24 <button onclick="gaibianyangshi()">点击</button> 25 26 <script> 27 /**33行 按bli获取元素* 28 *37行 再获取bli元素的上一个兄弟 ---ali元素油条* 29 *41行 再获取bli元素的下一个兄弟 ---cli元素米饺*/ 30 31 function gaibianyangshi() { 32 // 查找父节点 33 var tempel = document.getElementById("bli"); 34 tempel.className="steam"; 35 36 //previousSibling上一个兄弟 37 var previousNode = tempel.previousSibling; 38 previousNode.className="mycolor"; 39 40 //nextSibling下一个兄弟 41 var nextNode = tempel.nextSibling; 42 nextNode.className="mycolor"; 43 } 44 45 </script> 46 </body> 47 </html>
注意，<ul></ul>这段代码，要写成这样才正常查询到。
