前のノードを取得する
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 など) では無視されます。