取得上一個(gè)節(jié)點(diǎn)

在Javascript中，透過(guò)?previousSibling?來(lái)取得上一個(gè)節(jié)點(diǎn)。

語(yǔ)法：

    nodeObject.previousSibling

其中，nodeObject 為節(jié)點(diǎn)物件（元素節(jié)點(diǎn)）。

在IE下，會(huì)忽略節(jié)點(diǎn)間的空白節(jié)點(diǎn)（空格、回車和Tab鍵）；在遵循W3C規(guī)範(fàn)的瀏覽器（Chrome、FireFox、Safari等）下則不會(huì)。

請(qǐng)看下面一段程式碼：

<div id="demo">
    <div name="preNode">上一個(gè)節(jié)點(diǎn)</div>
    <div id="thisNode">當(dāng)前節(jié)點(diǎn)</div>
    <div name="nextNode">下一個(gè)節(jié)點(diǎn)</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一個(gè)節(jié)點(diǎn)的類型是："+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一個(gè)節(jié)點(diǎn)的名稱是："+preNode.getAttribute("name"):"")
        );
}
</script>

範(fàn)例示範(fàn)：

在IE8.0 以下，顯示：
? ??上一個(gè)節(jié)點(diǎn)的類型是：1
? ??上節(jié)點(diǎn)的名稱是：preNode
在Chrome、Opera、Safari、FireFox下，顯示：
? ??上一個(gè)節(jié)點(diǎn)的型別是：3

對(duì)上面的程式碼稍作修改，去除節(jié)點(diǎn)間的空白：

<div id="demo"><div name="preNode">上一個(gè)節(jié)點(diǎn)</div><div id="thisNode">當(dāng)前節(jié)點(diǎn)</div><div name="nextNode">下一個(gè)節(jié)點(diǎn)</div></div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一個(gè)節(jié)點(diǎn)的類型是："+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一個(gè)節(jié)點(diǎn)的名稱是："+preNode.getAttribute("name"):"")
        );
}
</script>

實(shí)例示範(fàn)：

在所有瀏覽器下，顯示：
? ? 上一個(gè)節(jié)點(diǎn)的型別是：1
? ??上一個(gè)節(jié)點(diǎn)的名稱是：preNode

取得下一個(gè)節(jié)點(diǎn)

在Javascript中，可以透過(guò)?nextSibling?來(lái)取得下一個(gè)節(jié)點(diǎn)。

與previousSibling 相同，在IE下，nextSibling 同樣會(huì)忽略節(jié)點(diǎn)間的空白節(jié)點(diǎn)（空格、回車和Tab鍵）；在遵循W3C規(guī)範(fàn)的瀏覽器（Chrome、FireFox、Safari等）下則不會(huì)。