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

最新推荐文章于 2024-07-12 08:35:59 发布

wkj001

最新推荐文章于 2024-07-12 08:35:59 发布

阅读量3.7w

点赞数

分类专栏： javascript

javascript 专栏收录该内容

96 篇文章 1 订阅

订阅专栏

原生js如何获取当前元素的同级元素:
获取当前元素的同辈元素利用jquery非常容易实现，只要利用siblings()函数即可简单实现，这里不做介绍，具体可以参阅 siblings()方法使用详解一章节，下面介绍一下如何利用原生javascript实现此功能。
代码实例如下:

[HTML] 纯文本查看复制代码运行代码

 
         <!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循环语句用法一章节。