示例
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 >
|