JavaScript DOMで移動する(nextElementSibling他)

JavaScriptのDOM操作で要素を取得して移動するサンプルです。

確認環境
・Windows10
・Google Chrome

目次

説明 子の要素の取得と次の要素への移動
  似ている他のメソッド
サンプル 子要素を取得して移動するサンプル
  whle文で移動するサンプル

子の要素の取得と次の要素への移動

firstElementChildプロパティは、指定した要素の最初の子要素を取得します。

nextElementSiblingプロパティは、次の要素(弟の要素)を返します。

lastElementChildプロパティは、指定した要素の最後の子要素を取得します。

previousElementSiblingプロパティは、前の要素(兄の要素)を返します。

似ている他のメソッド

jQueryにも要素を移動するメソッドがあります。prev,next,parentなどを使用します。

 

子要素を取得して移動するサンプル

子要素を取得して移動するサンプルです。

<table>
	<tr id="tr1">
		<td>テスト1</td>
		<td>テスト2</td>
		<td>テスト3</td>
	</tr>
</table>
<input type="button" value="ボタン" onclick="clickBtn1()">
<script>
function clickBtn1(){
	const c1 = document.getElementById("tr1").firstElementChild;
	console.log(c1); //<td>テスト1</td>

	const c2 = c1.nextElementSibling;
	console.log(c2); //<td>テスト2</td>

	const c3 = c1.nextElementSibling.nextElementSibling;
	console.log(c3); //<td>テスト3</td>

	const c4 = document.getElementById("tr1").lastElementChild;
	console.log(c4); //<td>テスト3</td>

	const c5 = c4.previousElementSibling;
	console.log(c5); //<td>テスト2</td>

	const c6 = c4.previousElementSibling.previousElementSibling;
	console.log(c6); //<td>テスト1</td>
}
</script>

8行目のボタンを押すと10行目の関数を実行します。
11行目は、firstElementChildで指定の要素の最初の子要素を取得します。
14行目は、nextElementSiblingで次の要素(弟)を取得しています。
17行目は、nextElementSiblingを続けています。次の次の要素を取得します。
20行目は、lastElementChildで最後の要素を取得しています。

whle文で移動するサンプル

子要素を取得してwhle文で移動するサンプルです。

<table>
	<tr id="tr1">
		<td>テスト1</td>
		<td>テスト2</td>
		<td>テスト3</td>
	</tr>
</table>
<input type="button" value="ボタン" onclick="clickBtn1()">
<script>
function clickBtn1(){
	let c1 = document.getElementById("tr1").firstElementChild;
	while(c1){
		console.log(c1);
		c1 = c1.nextElementSibling; //<td>テスト1</td>から順に表示
	}

	let c2 = document.getElementById("tr1").lastElementChild;
	while(c2){
		console.log(c2);
		c2 = c2.previousElementSibling; //<td>テスト3</td>から順に表示
	}
}
</script>

8行目のボタンを押すと10行目の関数を実行します。
11行目は、firstElementChildで指定の要素の最初の子要素を取得します。
12行目は、whileで子要素があるだけ繰り返します。
14行目は、nextElementSiblingで次の要素に移動します。
17行目は、lastElementChildで指定の要素の最後の子要素を取得します。
20行目は、previousElementSiblingで前の要素に移動します。

firstElementChild

  • 最初の子の要素を取得します。
  • 取得する要素がない場合は、nullを返します。
  • firstElementChildプロパティに似た名前にfirstChildプロパティがあります。firstChildプロパティは要素以外のノードも取得します。
  • 以下はMDNのfirstElementChildのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/ParentNode/firstElementChild

nextElementSibling

lastElementChild

  • 最後の子の要素を取得します。
  • 取得する要素がない場合は、nullを返します。
  • lastElementChildプロパティに似た名前にlastChildプロパティがあります。lastChildプロパティは要素以外のノードも取得します。
  • 以下はMDNのlastElementChildのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Node/lastChild

previousElementSibling 

関連の記事

JavaScript 全ての子の要素を取得/設定する(children)

△上に戻る