jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

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

概要
エレメントの親子兄弟等を指定する場合のまとめです
使用方法
下記例は実装のヒントとなるもので、状況に合わせてもっとコンパクトにしたり書き直してご使用ください。
備考
自分自身

<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>
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page