nextSibling和perviousSibling踩过的一些坑

菜鸟教程上对nextSibling、nextElementSibling、previousSibling、previousElementSibling的定义

• nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
• nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
• previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
• previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；
  注意：nextElementSibling和previousElementSibling属性均为只读属性！

HTML DOM中的三种节点

1. 元素节点 nodeType值是1
2. 属性节点nodeType值是2
3. 文本节点nodeType值是3
   为了更好理解这三种节点，请看下图：
   

有的时候我们在书写代码的时候，各个标签元素之间可能存在看不见的字符或者空格或者回车，这个时候通过nextSibling，previousSibling来获取一个节点的兄弟节点时，可能不会选中你想要的那个标签元素，这是因为，你可能选中的是文本节点。所以当你想通过用获取兄弟节点或者父节点来绑定事件时，最好注意自己到底要实现对文本节点的操作事件还是对元素节点的操作事件。

带Element和不带Element

例如下面的：我要实现当鼠标点击“确定”按钮时，将文本节点“向优秀的代码致敬!“改成"向优秀的coder致敬!“

//script代码段
<script>
        //window.onload等待html、css加载完成之后执行
        window.onload = function () {
            var btn = document.getElementById("btn");
            var value = btn.previousSibling;//获取文本节点
            console.log(value);
            //绑定鼠标事件
            btn.onclick = function () {
                //通过textContent来修改文本节点的文本内容
                value.textContent = "向优秀的coder致敬！";
            }
        }
    </script>

 <!-- html代码段 -->
<div id="box">
        <span>创造有价值的代码！</span>向优秀的代码致敬
        <button id="btn">确定</button>
    </div>

看到这儿，大家是不是已经明白怎么回事儿了，不带Element的nextSibling和previousSibling实际上获得的是下一个/上一个兄弟节点的文本节点，如果你想要连同元素节点一起响应事件的话，就必须使用带Eelement的nextElementSibling和previousElementSibling。

文章参考链接