JavaScriptで同階層の前後要素を取得することができる.nextElementSibling・previousElementSiblingプロパティの使い方

同階層の前後要素を取得する2つのプロパティ

JavaScriptで特定要素の前後要素を取得するには、下記の2つのプロパティを利用します。処理内容が微妙に異なるので、違いを押さえておくと良いでしょう。

プロパティ

プロパティ意味返り値
【特定要素】.nextElementSibling【特定要素】の次の要素要素(Element)
【特定要素】.previousElementSibling【特定要素】の次の要素要素(Element)
同階層の前後要素を取得するプロパティ

サンプルコード

サンプルコードとして、【特定要素】の前後要素の文字列を書き換えるスクリプトを紹介します。

以下リストの1つ目と3つめがHello Worldになっていれば成功です。

Output
【兄弟要素の書き換え】
  • 子要素1
  • 子要素2
  • 子要素3
Pug
#targetArea 【兄弟要素の書き換え】
	ul#targetList
		li.list-item 子要素1
		li.list-item 子要素2
		li.list-item 子要素3
CSS
ul#targetList li {
	list-style-position:inside;
}
JavaScript
const targetList = document.querySelector('#targetList li:nth-child(2)');
targetList.previousElementSibling.textContent = 'Hello World';
targetList.nextElementSibling.textContent = 'Hello World';
インストラクター
コメント

コメントを残す