คุณสมบัติ nextElementSibling

คุณสมบัติ nextElementSibling มีข้อมูลของ องค์ประกอบถัดไป ที่อยู่ใน parent เดียวกัน หากไม่มีองค์ประกอบดังกล่าว - จะคืนค่าเป็น null

ไวยากรณ์

element.nextElementSibling;

กำหนดองค์ประกอบ #elem มาให้ ลองแสดง ข้อความของเพื่อนบ้านด้านล่างของมัน:

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

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

console.log(text);

ผลลัพธ์จากการรันโค้ด:

'sibling'

หากไม่มีเพื่อนบ้านด้านล่าง หรือมันไม่ได้อยู่ ใน parent เดียวกับองค์ประกอบของเรา ก็จะคืนค่าเป็น null เช่นกัน:

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

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

ผลลัพธ์จากการรันโค้ด:

null