查找兄弟元素 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>这段代码，要写成这样才正常查询到。
标签：tempel,元素,nextSibling,mycolor,查找,bli,var,previousSibling 来源： https://www.cnblogs.com/hzyhx/p/11166101.html