查找兄弟元素

时间:2022-05-09 18:50:46

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html >
     < head >
         < title >访问元素</ title >
         < meta  charset = "UTF-8" >
         < meta  name = "viewport"  content = "width=device-width, initial-scale=1.0" >
         < style >
             .mycolor{
                 color:#fff;
                
             }
             .steam{
                 color: red;
             }
         </ style >
     </ head >
     < body >
         < ul  id = "ul" >
             < li  id = "ali" >油条</ li >< li  id = "bli" >包子</ li >< li  id = "cli" >米饺</ li >< li  id = "dli" >< a  id = "yufen" >鱼粉</ a ></ li >
         </ ul >
         < script >
             // 查找父节点
             var tempel = document.getElementById("bli");
             tempel.className="steam";
             
             var previousNode = tempel.previousSibling;
             previousNode.className="mycolor";
 
             var nextNode = tempel.nextSibling;
             nextNode.className="mycolor";
         </ script >
     </ body >
</ html >