JavaScript が兄弟ノードを取得する

前のノードを取得する

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

構文:

    nodeObject.previousSibling

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

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

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

<div id="demo">
    <div name="preNode">上一个节点</div>
    <div id="thisNode">当前节点</div>
    <div name="nextNode">下一个节点</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一个节点的类型是："+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一个节点的名称是："+preNode.getAttribute("name"):"")
        );
}
</script>

デモの例:

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

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

<div id="demo"><div name="preNode">上一个节点</div><div id="thisNode">当前节点</div><div name="nextNode">下一个节点</div></div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一个节点的类型是："+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一个节点的名称是："+preNode.getAttribute("name"):"")
        );
}
</script>

デモの例:

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

次のノードを取得します

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

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