前のノードを取得する

JavaScriptでは、previousSiblingを使用して前のノードを取得します。

構(gòu)文:

    nodeObject.previousSibling

このうち、nodeObjectはノードオブジェクト(要素ノード)です。

IE では、ノード間の空白ノード (スペース、キャリッジ リターン、Tab キー) は無(wú)視されます。W3C 仕様に準(zhǔn)拠したブラウザ (Chrome、FireFox、Safari など) では無(wú)視されます。

次のコードを見てください:

<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>

デモの例:

IE8.0 では、次のように表示されます:
前のノードのタイプ: 1
前のノードの名前: preNode
Chrome、Opera、Safari および FireFox では、次のように表示されます:
前のノードのタイプは次のとおりです: 3

上記のコードを少し変更して、ノード間のスペースを削除します:

<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>

デモの例:

Underすべてのブラウザ、表示:
前のノードのタイプは: 1
前のノードの名前は: preNode

次のノードを取得します

Javascript では、nextSibling を通じて次のノードを取得できます。

IE では nextSibling もノード間の空白ノード (スペース、復(fù)帰、Tab キー) を無(wú)視しますが、W3C 仕様に準(zhǔn)拠したブラウザー (Chrome、FireFox、Safari など) では無(wú)視されます。