js兄弟节点兼容处理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sweet_o/article/details/89533962

<div class="container">

<label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span>

</div>

<script type="text/javascript">

// span .nextSibling.style.color="red";  获取下一个兄弟节点 只有IE 6 7 8兼容

// span .nextElementSibling.style.color="red";   其他浏览器兼容

var span = this.nextElementSibling || this.nextSibling;// 所以用这种处理兼容的办法：中间通过一个变量，获取其中一个值。注意：先写正常浏览器，再写要去兼容的IE其他浏览器。

span.style.color="red";

//span .previousElementSibling.style.color="blue";    获取上一个兄弟节点，处理兼容方法同上

//span .previousSibling.style.color="blue";

nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；

nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

</script>

使用if(){}else{}方法