JavaScript DOMで移動する(nextElementSibling他)

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

確認環境
・Google Chrome

目次

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

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

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

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

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

コード

サンプルコードです。

<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行目を取得します。

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

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

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

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

コード

サンプルコードです。

<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行目を取得します。

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)

△上に戻る