การทำงานกับโหนดใน JavaScript

ดังที่คุณทราบ แท็กสามารถมีแท็กอื่นอยู่ภายในได้ หรือพูดในภาษาของ JavaScript คือ องค์ประกอบ DOM สามารถมีองค์ประกอบ DOM อื่นอยู่ภายในได้ นอกจากนี้แล้ว ยังสามารถมีความคิดเห็น และข้อความธรรมดาได้อีกด้วย ความคิดเห็น ข้อความ และ DOM องค์ประกอบทั้งหมดนี้ถูกรวมเข้าด้วยกันด้วยชื่อเดียว - โหนด

คุณคุ้นเคยกับคุณสมบัติ firstElementChild, lastElementChild, nextElementSibling, previousElementSibling แล้ว คุณสมบัติเหล่านี้ทำงานกับองค์ประกอบ DOM โดยตรง โดยไม่สนใจโหนดอื่นๆ โดยทั่วไปแล้ว นี่คือสิ่งที่เราต้องการ

อย่างไรก็ตาม ยังมีคุณสมบัติ firstChild, lastChild, nextSibling, previousSibling ด้วย คุณสมบัติเหล่านี้ทำงานในลักษณะเดียวกัน แต่จะนับรวมทุกโหนด มาดูความแตกต่าง ระหว่างคุณสมบัติเหล่านี้ผ่านตัวอย่างกัน สมมติว่าเรามี div ซึ่งภายในมีสามโหนด:

html<div id="elem"><!--com-->text<span>tag</span></div>

รับการอ้างอิงไปยัง div นี้ลงในตัวแปร:

javascriptlet elem = document.querySelector('#elem');

ตอนนี้เรามาดูว่ามีอะไรอยู่ใน คุณสมบัติ firstChild และ firstElementChild:

javascriptconsole.log(elem.firstChild);        // ความคิดเห็น
console.log(elem.firstElementChild); // แท็ก span