JavaScript中nextSibling与previousSibling属性的跨浏览器差异及注意事项

nextSibling属性基础与浏览器差异

nextSibling属性用于获取当前节点的下一个同级节点；若该节点之后不存在同级别的子节点，则该属性返回null。

需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：

先来看一个例子：

 
<body>
<div>
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
<input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />
</div>
</bod

从表面结构看，div元素的nextSibling似乎只包含两个input节点。但实际上，该属性返回了5个节点：换行符、input节点、换行符、input节点以及末尾的换行符。这是因为在生成button、checkbox、radio等表单控件时，IE浏览器会自动在标签后插入一个1字节大小的空白节点。

IE浏览器会跳过节点间产生的空格文档节点（如换行字符），而Mozilla（Firefox）则不会这样做——FF会将空格、换行等排版元素视为有效节点进行读取。因此，在IE中使用nextSibling能直接读取到的下一个节点元素，在Firefox中可能需要使用nextSibling.nextSibling才能获取。

Opera和Safari浏览器对nextSibling属性的处理方式与Firefox保持一致。

previousSibling属性与节点遍历技巧

该属性与nextSibling属性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身，但前提必须是：该标签元素的后面必须有一个同级的元素，否则就返回null了。

一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。