獲取上一個節(jié)點

在Javascript中，通過 previousSibling 來獲取上一個節(jié)點。

語法：

    nodeObject.previousSibling

其中，nodeObject 為節(jié)點對象（元素節(jié)點）。

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

請看下面一段代碼：

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

實例演示：

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

對上面的代碼稍作修改，去掉節(jié)點間的空白：

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

實例演示：

在所有瀏覽器下，顯示：
    上一個節(jié)點的類型是：1
    上一個節(jié)點的名稱是：preNode

獲取下一個節(jié)點

在Javascript中，可以通過 nextSibling 來獲取下一個節(jié)點。

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