JavaScript 相対的な関係でノードを取得するサンプル(childNodes)

JavaScriptのあるノードを元にしてその子や兄弟のノードを取得するサンプルです。

目次

相対的な関係でノードを取得できる主なプロパティ

相対的な関係でノードを取得できる主なプロパティです。
あるノードを元にして相対的な位置関係からノードを取得します。ノードウォーキングと呼びます。

プロパティ 説明
parentNode 親のノード
previousSibling 兄のノード
nextSibling 弟のノード
firstChild 最初の子ノード
lastChild 最後の子ノード
childNodes 全ての子ノード

relative-node

childNodesを使用して全ての子の要素ノードを取得

childNodesを使用して、指定のノード配下の全ての子の要素ノードを取得をするサンプルです。
取得するサンプルは以下のhtmlになっています。
「表示ボタン」を押すとdiv id="test1"配下の子の要素ノードを取得して「テスト:」の横に文言を表示します。

<div id = "test1">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>

あいう

かきく けこ

さしす

テスト:

コード

上記サンプルのコードです。
4行目は、getElementByIdメソッドで21行目を指定しています。
6行目は、childNodesで21行目以下の全ての子ノードを取得しています。
8行目は、取得した子ノードに対してループ処理をしています。
10行目は、 nodeType==1で要素ノードのみを取得しています。

<script>
function btn1_click(){
	var str ="";
	var t1 = document.getElementById('test1');
	// 1. childNodesで子ノードを取得
	var child1 = t1.childNodes; 
	// 2. 取得した子ノードに対してループ処理
	for (var i=0;i<child1.length;i++){
		// 3. nodeType==1で要素ノードのみを取得
		if(child1.item(i).nodeType ==1){
			str = str + child1.item(i).innerHTML;
		}
	}
	document.getElementById("sp1").innerHTML = str;
}
function btn2_click(){
	document.getElementById("sp1").innerHTML = "";
}
</script>
<body >
<div id = "test1">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>
<p>テスト:<span id="sp1"></span></p>
<input type="button" value="表示" onclick='btn1_click()'>
<input type="button" value="クリア" onclick='btn2_click()'>
</body>

firstChildを使用して最初の子の要素ノードを取得

firstChildを使用して、指定のノードの最初の子の要素ノードを取得をするサンプルです。
取得するサンプルは以下のhtmlになっています。
「表示ボタン」を押すとdiv id="test2"の子の最初の要素ノードを取得して「テスト:」の横に文言を表示します。

<div id = "test2">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>

あいう

かきく けこ

さしす

テスト:

コード

上記サンプルのコードです。
6行目は、firstChildを使用して最初の子ノードを取得しています。
7行目からのループ処理は、以下のように24行目の開始divタグと開始Pタグの間に空白(テキストノード)があるため、それを取り除いています。

<div id = "test2">
	<p>あいう</p>

htmlが以下のようになっていれば、空白(テキストノード)がないため、ループ処理は不要になります。

<div id = "test2"><p>あいう</p>

14行目は、nextSiblingで次のノード(弟のノード)を取得しています。

<script>
function btn3_click(){
	var str ="";
	var t1 = document.getElementById('test2');
	// 1. firstChildで最初の子ノードを取得
	var child1 = t1.firstChild; 
	while(child1){
		// 2. nodeType==1で要素ノードのみを取得
		if(child1.nodeType ==1) {
			str = str + child1.innerHTML;
			break;
		}
		// 3.nextSiblingで弟のノードを取得
		child1 = child1.nextSibling;
	}
	document.getElementById("sp3").innerHTML = str;
}
function btn4_click(){
	document.getElementById("sp3").innerHTML = "";
}
</script>

<body >
<div id = "test2">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>
<p>テスト:<span id="sp3"></span></p>
<input type="button" value="表示" onclick='btn3_click()'>
<input type="button" value="クリア" onclick='btn4_click()'>

lastChildを使用して最後の子の要素ノードを取得

lastChildを使用して、指定のノードの最後の子の要素ノードを取得をするサンプルです。
取得するサンプルは以下のhtmlになっています。
「表示ボタン」を押すとdiv id="test3"の子の最後の要素ノードを取得して「テスト:」の横に文言を表示します。

<div id = "test3">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>

あいう

かきく けこ

さしす

テスト:

コード

上記サンプルのコードです。
6行目は、lastChildを使用して最後の子ノードを取得しています。
7行目からのループ処理は、以下のように29行目の終了divタグと終了Pタグの間に空白(テキストノード)があるため、それを取り除いています。

	<p>さしす</p>
</div>

htmlが以下のようになっていれば、空白(テキストノード)がないため、ループ処理は不要になります。

	<p>さしす</p></div>

14行目は、previousSiblingで前のノード(兄のノード)を取得しています。

<script>
function btn5_click(){
	var str ="";
	var t1 = document.getElementById('test3');
	// 1. lastChildで最後の子ノードを取得
	var child1 = t1.lastChild; 
	while(child1){
		// 2. nodeType==1で要素ノードのみを取得
		if(child1.nodeType ==1) {
			str = str + child1.innerHTML;
			break;
		}
		// 3.previousSiblingで兄のノードを取得
		child1 = child1.previousSibling;
	}
	document.getElementById("sp4").innerHTML = str;
}
function btn6_click(){
	document.getElementById("sp4").innerHTML = "";
}
</script>

<body >
<div id = "test3">
	<p>あいう</p>
	<p>かきく
		<span>けこ</span>
	</p>
	<p>さしす</p>
</div>
<p>テスト:<span id="sp4"></span></p>
<input type="button" value="表示" onclick='btn5_click()'>
<input type="button" value="クリア" onclick='btn6_click()'>

主なノードタイプ(nodeType)

説明
1 要素ノード
3 テキストノード
7 処理命令ノード
8 コメントノード
9 文書ノード
10 文書型ノード
11 文書断片ノード

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る