การทำงานกับโหนดใน JavaScript
ดังที่คุณทราบ แท็กสามารถมีแท็กอื่นอยู่ภายในได้ หรือพูดในภาษาของ JavaScript คือ องค์ประกอบ DOM สามารถมีองค์ประกอบ DOM อื่นอยู่ภายในได้ นอกจากนี้แล้ว ยังสามารถมีความคิดเห็น และข้อความธรรมดาได้อีกด้วย ความคิดเห็น ข้อความ และ DOM องค์ประกอบทั้งหมดนี้ถูกรวมเข้าด้วยกันด้วยชื่อเดียว - โหนด
คุณคุ้นเคยกับคุณสมบัติ firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
แล้ว คุณสมบัติเหล่านี้ทำงานกับองค์ประกอบ DOM โดยตรง
โดยไม่สนใจโหนดอื่นๆ โดยทั่วไปแล้ว
นี่คือสิ่งที่เราต้องการ
อย่างไรก็ตาม ยังมีคุณสมบัติ firstChild,
lastChild, nextSibling, previousSibling
ด้วย คุณสมบัติเหล่านี้ทำงานในลักษณะเดียวกัน
แต่จะนับรวมทุกโหนด มาดูความแตกต่าง
ระหว่างคุณสมบัติเหล่านี้ผ่านตัวอย่างกัน
สมมติว่าเรามี div ซึ่งภายในมีสามโหนด:
<div id="elem"><!--com-->text<span>tag</span></div>
รับการอ้างอิงไปยัง div นี้ลงในตัวแปร:
let elem = document.querySelector('#elem');
ตอนนี้เรามาดูว่ามีอะไรอยู่ใน
คุณสมบัติ firstChild และ firstElementChild:
console.log(elem.firstChild); // ความคิดเห็น
console.log(elem.firstElementChild); // แท็ก span
เขียนโค้ดที่แสดงความแตกต่างระหว่าง
lastChild และ lastElementChild
เขียนโค้ดที่แสดงความแตกต่างระหว่าง
nextSibling และ nextElementSibling
เขียนโค้ดที่แสดงความแตกต่างระหว่าง
previousSibling และ previousElementSibling
