原生js通过点击获取元素及其兄弟元素

2020/8/23修改
这是很早之前写DOM的时候弄的东西，事实上通过div.nextElementSibling代替div.nextSibling,div.children代替div.childNodes即可去除空格和换行的干扰，而且如果你使用了框架，或引入了UI组件，这个效果更容易做。

---

关于原生js通过点击获取元素及其兄弟元素的一个削笔机。
小笔记（指正）

html结构如下：

    <div id="header">
        <div onclick="waschecked(event)">网友讨论圈</div>
        <div onclick="waschecked(event)" class="checked">晒单贴</div>
        <div onclick="waschecked(event)">讨论帖</div>
        <div onclick="waschecked(event)">问答帖</div>
        <div onclick="waschecked(event)">圈子帖</div>
    </div>

css的结构如下：

#header{
        width:900px;
        height: 40px;
        background-color: #ccc;
        margin-bottom: 5px;
    }
    #header>div{
        float:left;
        width: 100px;
        height: 40px;
        background-color: #ccc;
        line-height: 40px;
        text-align: center;
    }
    .checked{
        margin-top: -5px;
        background-color: white !important;
        border-top: 5px solid red;
    }

这是效果（仅包括上边的导航栏，下面的代码我没贴，与文章内容无关），主要想做的呢就是通过点击，使得该点击的元素改变状态，同时原先的元素清除状态。从而实现导航栏的切换功能。

效果图

其实也可以用hover:伪类来实现，不过深究的话这两个完全不是一个效果，hover是鼠标掠过的时候改变样式，我们想做的是点击之后改变样式，这里实现的思路是，通过onclick事件绑定js方法，将选中元素的样式做出改变。具体如下：
1.点击元素div，触发事件onclick，执行方法waschecked()；
2.获得被点击的元素；
3.遍历该元素的所有兄弟元素，将其样式清除（通过改变其className来实现，下同）；
4.将目标样式设置为该元素的样式。
方法如下：

    //获取被点击的元素，在html中的函数需要带有形参“event”，在声明函数时用params接收（其实你用什么接收都无所谓，只要你看得懂）
    function waschecked(params){
        //params.target 被点击的元素
        //params.target.parentNode 被点击的元素的父节点
        //params.target.parentNode.childNodes 被点击的元素的父节点的所有子节点，即被点击元素的兄弟节点
        var sibling=params.target.parentNode.childNodes;
        // 开始遍历
        for(var i=0;i<sibling.length;i++){
            // 输出看一下
            console.log(sibling[i],sibling[i].nodeType);
        }
    }

结果男默女泪：

这波啊，这波是无中生子
输出的子元素竟然多达11个，除了亲儿子还多出几个“私生子”？
这里的原因是：在写div的时候我们使用了换行，在编译时html将其编译为空格，也就是上图中的#text，也就是说，你div#parent竟然还有几个不为人知的儿子
突然发现我的比喻好恰当（逃）
这里我们需要筛选一下，方法有两个：
一是检查typeNode，如果为3，则其为文本#text，不管，若为1，则为元素，当场抓获。
二是直接写下标，因为这里元素不多，div下标为2，4，6，8，10，很容易穷举，不过一般不建议这么来，万一元素很多呢？
然后按步骤来就是了。

    //获取被点击的元素，在html中的函数需要带有形参“event”，在声明函数时用params接收（其实你用什么接收都无所谓，只要你看得懂）
    function waschecked(params){
        //params.target 被点击的元素
        //params.target.parentNode 被点击的元素的父节点
        //params.target.parentNode.childNodes 被点击的元素的父节点的所有子节点，即被点击元素的兄弟节点
        var sibling=params.target.parentNode.childNodes;
        // 开始遍历
        for(var i=0;i<sibling.length;i++){
            // 输出看一下
            console.log(sibling[i],sibling[i].nodeType);
            // 穷举选中所有div
            if(i%2==1){
                //删除样式
                sibling[i].className="";
            }
        }
        // 给当前点击元素添加样式
        params.target.className="checked";
    }

这样就完成了。
2020/5/13