原生js如何获取当前元素的同级元素

原生js如何获取当前元素的同级元素:
获取当前元素的同辈元素利用jquery非常容易实现,只要利用siblings()函数即可简单实现,这里不做介绍,具体可以参阅 siblings()方法使用详解 一章节, 下面介绍一下如何利用原生javascript实现此功能。
代码实例如下:
[HTML]  纯文本查看  复制代码 运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >蚂蚁部落</ title >
< script type = "text/javascript" >
window.onload=function(){
   var oli=document.getElementById("antzone");
   var obox=oli.parentNode;
   var lis=obox.children;
   for(var i=0;i< lis.length ;i++){
     if(lis[i]!=oli){
       lis[i] .style.color = "red" ;
     }
   }
}
</script>
</ head >
< body >
< ul id = "box" >
   < li >蚂蚁部落一</ li >
   < li id = "antzone" >蚂蚁部落二</ li >
   < li >蚂蚁部落三</ li >
   < li >蚂蚁部落四</ li >
</ ul >
</ body >
</ html >

以上代码实现了我们的要求,可以将指定元素的兄弟元素的字体颜色设置为红色。
一.实现原理:
获取当前元素之后,然后在获取它的父元素,再获取父元素的所有子元素,最后遍历每一个子元素,如果不是当前元素,那么就将它的字体颜色设置为红色,就这么简单。
二.相关阅读:
1.parentNode和children可以参阅 parentNode,childNodes,children属性详解 一章节。
2.for循环可以参阅 javascript的for循环语句用法 一章节。  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值