エレメント親子兄弟の取得まとめ

<div id="aaa"></div>

<script>
var elm = document.getElementById('aaa');
console.log(elm.id);	//aaa
</script>
	

<div id="bbb">
	<div id="aaa"></div>
</div>

<script>
var elm = document.getElementById('aaa').parentNode;
console.log(elm.id);	//bbb
</script>
	

<div id="aaa">
	<div id="bbb"></div>
	<div id="ccc"></div>
	<div id="ddd"></div>
</div>

<script>
//aaaの最初の子bbbを得たい場合

//子の最初(期待した結果にならない例)
var elm = document.getElementById('aaa').firstChild;	//aaaとbbbの間の空白の指定となる
console.log(elm.id);	//undefined

//子の最初(期待どおりの例)
var elms = document.getElementById('aaa').getElementsByTagName('div');
var result = (elms.length == 0) ? undefined : elms[0].id;
console.log(result);	//bbb

//子の最初(期待どおりの例)
var elms = document.getElementById('aaa').childNodes;
var result = undefined;
for (var i = 0; i < elms.length; i++) {
	if (elms[i].id) {
		result = elms[i].id;
		break;
	}
}
console.log(result);	//bbb
</script>
	

<div id="aaa">
	<div id="bbb"></div>
	<div id="ccc"></div>
	<div id="ddd"></div>
</div>

<script>
//aaaの最後の子dddを得たい場合

//子の最後(期待した結果にならない例)
var elm = document.getElementById('aaa').lastChild;	//ddd後ろの空白の指定となる
console.log(elm.id);	//undefined

//子の最後(期待どおりの例)
var elms = document.getElementById('aaa').getElementsByTagName('div');
var result = (elms.length == 0) ? undefined : elms[elms.length - 1].id;
console.log(result);	//ddd

//子の最後(期待どおりの例)
var elms = document.getElementById('aaa').childNodes;
var result = undefined;
for (var i = elms.length - 1; i >= 0; i--) {
	if (elms[i].id) {
		result = elms[i].id;
		break;
	}
}
console.log(result);	//ddd
</script>
	

<div>
	<div id="aaa"></div>
	<div id="bbb"></div>
	<div id="ccc"></div>
	<div id="ddd"></div>
	<div id="eee"></div>
</div>

<script>
//cccの上の兄弟bbbを得たい場合

//上の兄弟(期待した結果にならない例)
var elm = document.getElementById('ccc').previousSibling;	//ccc前の空白の指定となる
console.log(elm.id);	//undefined

//上の兄弟(期待どおりの例)
var elms = document.getElementById('ccc').parentNode.getElementsByTagName('div');
var result = undefined;
for (var i = 0; i < elms.length; i++) {
	if (elms[i].id) {
		if (elms[i].id == 'ccc') {
			break;
		} else {
			result = elms[i].id;
		}
	}
}
console.log(result);	//bbb

//上の兄弟(期待どおりの例)
var elms = document.getElementById('ccc').parentNode.childNodes;
var result = undefined;
for (var i = 0; i < elms.length; i++) {
	if (elms[i].id) {
		if (elms[i].id == 'ccc') {
			break;
		} else {
			result = elms[i].id;
		}
	}
}
console.log(result);	//bbb
</script>
	

<div>
	<div id="aaa"></div>
	<div id="bbb"></div>
	<div id="ccc"></div>
	<div id="ddd"></div>
	<div id="eee"></div>
</div>

<script>
//cccの下の兄弟dddを得たい場合

//下の兄弟(期待した結果にならない例)
var elm = document.getElementById('ccc').nextSibling;	//ccc後ろの空白の指定となる
console.log(elm.id);	//undefined

//下の兄弟(期待どおりの例)
var elms = document.getElementById('ccc').parentNode.getElementsByTagName('div');
var result = undefined;
for (var i = 1; i < elms.length; i++) {
	if (elms[i - 1].id && elms[i - 1].id == 'ccc') {
		result = elms[i].id;
		break;
	}
}
console.log(result);	//ddd

//下の兄弟(期待どおりの例)
var elms = document.getElementById('ccc').parentNode.childNodes;
var result = undefined;
var nextFlag = false;
for (var i = 0; i < elms.length; i++) {
	if (elms[i].id) {
		if (nextFlag) {
			result = elms[i].id;
			break;
		} else {
			if (elms[i].id == 'ccc') {
				nextFlag = true;
			}
		}
	}
}
console.log(result);	//ddd
</script>