JavaScript nextElementSibling DOMで次に移動

nas2018/09/01

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

目次 最初の子の要素を取得し、次の要素へ移動する
  最後の子の要素を取得し、前の要素へ移動する

最初の子の要素を取得し、次の要素へ移動する

変数 = node.firstElementChild;
変数 = elementNodeReference.nextElementSibling;
  • firstElementChildプロパティは、指定した要素の最初の子要素を取得します。
  • 取得する要素がない場合は、nullを返します。
  • firstElementChildプロパティに似た名前にfirstChildプロパティがあります。firstChildプロパティは要素以外のノードも取得します
  • nextElementSiblingプロパティは、次の要素(弟の要素)を返します。
  • 指定の要素が最後の場合は、nullを返します。
  • nextElementSiblingプロパティに似た名前にnextSiblingプロパティがあります。nextSiblingプロパティは要素以外のノードも返します。

コード

最初の子の要素を取得し、次の要素へ移動するサンプルです。

<table>
	<tr id="tr1">
		<td>テスト1</td>
		<td>テスト2</td>
		<td>テスト3</td>
	</tr>
</table>
<script>
	const c1 = document.getElementById("tr1").firstElementChild;
	console.log(c1); //<td>テスト1</td>が表示される

	console.log(c1.nextElementSibling); 
  // <td>テスト2</td>が表示される

	console.log(c1.nextElementSibling.nextElementSibling); 
  // <td>テスト3</td>が表示される
</script>

9行目は、getElementByIdメソッドで指定した"tr1"のfirstElementChildである3行目を取得します。
12行目は、9行目で取得した要素からnextElementSiblingで4行目を取得します。
15行目は、nextElementSiblingを2回続けて5行目を取得します。

最後の子の要素を取得し、前の要素へ移動する

変数 = node.lastElementChild;
変数 = elementNodeReference.previousElementSibling;
  • lastElementChildプロパティは、指定した要素の最後の子要素を取得します。
  • 取得する要素がない場合は、nullを返します。
  • lastElementChildプロパティに似た名前にlastChildプロパティがあります。lastChildプロパティは要素以外のノードも取得します。
  • previousElementSiblingプロパティは、前の要素(兄の要素)を返します。
  • 指定の要素が先頭の場合は、nullを返します。
  • previousElementSibling プロパティに似た名前にpreviousSiblingプロパティがあります。previousSiblingプロパティは要素以外のノードも返します。

コード

最後の子の要素を取得し、前の要素へ移動するサンプルです。

<table>
	<tr id="tr1">
		<td>テスト1</td>
		<td>テスト2</td>
		<td>テスト3</td>
	</tr>
</table>
<script>
	const c1 = document.getElementById("tr1").lastElementChild;
	console.log(c1); // <td>テスト3</td>

	console.log(c1.previousElementSibling); 
  // <td>テスト2</td>

	console.log(c1.previousElementSibling.previousElementSibling); 
  // <td>テスト1</td>
</script>

9行目は、getElementByIdメソッドで指定した"tr1"のlastElementChildである5行目を取得します。
12行目は、9行目で取得した要素からpreviousElementSiblingで4行目を取得します。
15行目は、previousElementSiblingを2回続けて3行目を取得します。

以下はMDNのfirstElementChildのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/firstElementChild

以下はMDNのnextElementSiblingのリンクです。
https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

以下はMDNのlastElementChildのリンクです。
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/lastElementChild

以下はMDNのpreviousElementSibling のリンクです。
https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

関連の記事

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

△上に戻る