プロパティ nextElementSibling

プロパティ nextElementSibling は、同じ親要素内にある次の要素を含みます。そのような要素がない場合、 null が返されます。

構文

要素.nextElementSibling;

要素 #elem が与えられています。その下の兄弟要素のテキストを出力してみましょう：

<p id="elem">elem</p>
<p>sibling</p>

let elem = document.querySelector('#elem');
let text = elem.nextElementSibling.textContent;

console.log(text);

コード実行結果：

'sibling'

下の兄弟要素が存在しない場合、または私たちの要素と同じ親要素内に配置されていない場合も、 null が返されます：

<div>
	<p id="elem">elem</p>
</div>
<p>sibling</p>

let elem = document.querySelector('#elem');
console.log(elem.nextElementSibling);

コード実行結果：

null