คุณสมบัติ previousElementSibling

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

ไวยากรณ์

element.previousElementSibling;

กำหนดเอลิเมนต์ #elem มาแสดง ข้อความของเอลิเมนต์ข้างเคียงด้านบนของมัน:

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

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

console.log(text);

ผลลัพธ์จากการเรียกใช้โค้ด:

'sibling'

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

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

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

ผลลัพธ์จากการเรียกใช้โค้ด:

null

คุณสมบัติ nextElementSibling,
ซึ่งมีเอลิเมนต์ข้างเคียงด้านล่าง (เอลิเมนต์ถัดไป)