本文介绍如何使用JavaScript获取DOM元素的下一个兄弟节点。重点对比nextElementSibling与nextSibling在IE和Firefox中的行为差异，通过加减按钮示例演示如何准确获取标签元素并处理数值，解决空格节点导致的兼容性问题。
JavaScript获取DOM下一个节点的方法：nextElementSibling与nextSibling的区别
本文通过JavaScript实现一个页面点击加减按钮累加数字的功能。
HTML结构大致如下，具体细节不影响核心逻辑理解。
<input type="button" value="+" onclick="jia(this)" />
<label class="num">0</label>
<input type="button" value="-" onclick="jian(this)" />最终页面效果如图所示。
代码实现与逻辑解析
具体的JavaScript实现代码如下。
<script type="text/javascript">
function jia(a)
{
var nextnode = a.nextElementSibling;//获取下一个节点
alert(nextnode.innerHTML);
var a = parseInt(nextnode.innerHTML)
a += 1;
nextnode.innerHTML = a;
}
function jian(a) {
var previousnode = a.previousElementSibling;
var a = parseInt(previousnode.innerHTML)
a -= 1;
a = a > 0 ? a : 0;
previousnode.innerHTML = a;
}
</script>
以下是对代码逻辑的详细解释：
函数jian(a)和
函数jia(a)中的参数a代表当前被点击的对象。在onclick事件绑定的方法中，通过传入this来获取当前元素。
nextElementSibling与nextSibling的兼容性差异
nextElementSibling用于获取当前节点的下一个兄弟节点，previousElementSibling用于获取当前节点的上一个兄弟节点。
需要注意的是，IE浏览器会跳过节点间产生的空格文档节点（如换行符），而Mozilla（Firefox）不会这样做，FF会将空格、换行等排版元素视为节点读取。因此，在IE中使用nextSibling可以读取到下一个节点元素，而在Firefox中则需要使用nextElementSibling。
上述解释表明，使用nextElementSibling和previousElementSibling可以获取下一个和上一个兄弟节点，从而忽略换行、空格等空白节点，直接定位到目标标签元素。然而，以下两个属性
nextSibling和previousSibling也能获取下一个和上一个兄弟节点，但它们在IE中表现良好，而在其他浏览器中可能因空白节点问题导致获取失败。
parseInt用于将字符串转换为整数。
a = a > 0 ? a : 0;使用了三元表达式，确保数值不小于0。