其他分享
首页 > 其他分享> > 查找兄弟元素 previousSibling nextSibling

查找兄弟元素 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