JavaScript 练手小技巧：原生JS获兄弟标签

兄弟标签，就是同一个父标签下的同级标签，不包括目标标签自己。

一般对兄弟标签的应用，有三种情况：找所有的哥哥标签，找所有的弟弟标签，找所有的兄弟标签。

原生的JS，只提供了 nextElementSibling、previousElementSibling 两个找兄弟标签的属性，还只能找【紧邻】的标签。

所以，要找兄弟标签，还需要自己封装函数。

HTML：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li id="item3">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

JavaScript： 

let item3 = document.getElementById("item3");
// 找所有的【哥哥】标签
function preSilings(tag){
    let pre = tag.previousElementSibling;
    let preArr = [];
    // 如果哥哥标签不存在，pre 就是 null，就会跳出循环。
    while( pre ){
        preArr.push( pre );
        pre = pre.previousElementSibling;
    }
    // 反转下数组，因为得到的是从下到上的顺序，需要翻转下
    return preArr.reverse() ;
}
// 找所有的【弟弟】标签
function nextSilings(tag){
    let next = tag.nextElementSibling;
    let nextArr = [];
    // 如果弟弟标签不存在，next 就是 null，就会跳出循环。
    while( next ){
        nextArr.push( next );
        next = next.nextElementSibling;
    }
    // 反转下数组，因为得到的是从下到上的顺序，需要翻转下
    return nextArr ;
}
// 找所有的兄弟标签，方式一：需要借用前面的方法，把两个结果拼接起来。
function allSiblings( tag ){
    return preSilings(tag).concat( nextSilings(tag) );
}
// 找所有的兄弟标签，方式二：
function allSiblings2( tag ){
    let parent = tag.parentNode ;
    let bro = parent.children ;
    let siblings = [];
    for(let i=0; i<= bro.length-1; i++ ){
        if( bro[i] != tag ){
            siblings.push( bro[i] );
        }
    }
    return siblings;
}
console.info( preSilings(item3) );   //  1,2
console.info( nextSilings(item3) );  // 3,4
console.info( allSiblings(item3) );  // 1,2,3,4
console.info( allSiblings2(item3) ); // 1,2,3,4

完毕~