查找兄弟元素 previousSibling nextSibling

Posted 2022-04-02 hzyhx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了查找兄弟元素 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>这段代码，要写成这样才正常查询到。

以上是关于查找兄弟元素 previousSibling nextSibling的主要内容，如果未能解决你的问题，请参考以下文章