親要素 直前の要素 直後の要素
parentNode.属性 previousSibling.属性 nextSibling.属性

[説明]

[サンプル]

[実行結果]

[ソースコード]

<div id="groups">
	<div id="kikaku">企画部</div>
	<div id="gijyutsu">技術部</div> // ここを基準にして
	<div id="eigyou">
		<div id="eigyou_1">第一営業部</div>
		<div id="eigyou_2">第二営業部</div>
	</div>
</div>

<script type="text/JavaScript">
var btn = document.getElementById('btn');
var hyouji = document.getElementById('koko');

btn.onclick = function(){
	var gijyutsu_bu = document.getElementById('gijyutsu');
	var parent = gijyutsu_bu.parentNode;
	var previous = gijyutsu_bu.previousSibling;
	var next = gijyutsu_bu.nextSibling;

	var str = "技術部の親要素は「" + parent.id + "」です。直前の要素は「" + previous.id + "」です。直後の要素は「 " + next.id + "」です。";
	
	hyouji.innerHTML = str;
}
</script>

インデックスにもどる