ในโลกของการพัฒนาเว็บสมัยใหม่ การจัดการกับโครงสร้าง DOM (Document Object Model) เป็นทักษะพื้นฐานที่ขาดไม่ได้ แม้ว่าไลบรารีอย่าง jQuery จะเคยเป็นมาตรฐานในการช่วยให้การเลือกและจัดการ Element ดูง่ายขึ้น แต่เมื่อเวลาผ่านไป ด้วยความสามารถที่เพิ่มขึ้นของเบราว์เซอร์ นักพัฒนาจึงเริ่มหันมาให้ความสำคัญกับการใช้ JavaScript ดั้งเดิม (Pure JS) มากขึ้นเรื่อยๆ เพื่อลดขนาดโค้ด ลดการพึ่งพาภายนอก และเพิ่มประสิทธิภาพในการทำงานโดยรวม
ทำไมต้องเปลี่ยนจาก jQuery มาใช้ Pure JS?
หัวใจสำคัญของการพัฒนาเว็บคุณภาพสูงคือการเขียนโค้ดที่รวดเร็วและมีขนาดเล็กที่สุด การใช้ jQuery ด้วยไวยากรณ์เช่น $(' #id ') นั้นสะดวกมากเพราะมันเป็น Abstraction Layer ที่ช่วยให้โค้ดดูสั้นลง แต่ภายใต้เบื้องหลัง มันคือการเรียกใช้งานที่มาพร้อมกับ Overhead ของไลบรารีทั้งหมด ซึ่งแม้จะดูเล็กน้อย แต่ก็ส่งผลกระทบต่อขนาด Bundle และเวลาในการโหลดโดยรวม
ทางออกที่ทรงพลังกว่าคือการใช้ API ดั้งเดิมของ Browser อย่าง document.querySelector() ซึ่งใช้มาตรฐาน CSS Selector ในการค้นหา Node โดยตรง ทำให้เราได้ประสิทธิภาพสูงสุดโดยไม่ต้องแบกรับน้ำหนักของเฟรมเวิร์กขนาดใหญ่ การทำความเข้าใจกลไกนี้จึงเป็นกุญแจสำคัญในการยกระดับโค้ดให้เป็น Pure JS ระดับมืออาชีพ
การใช้ document.querySelector() เพื่อประสิทธิภาพสูงสุด
document.querySelector() คือเมธอดที่ถูกออกแบบมาเพื่อค้นหา Element ตัวแรกที่ตรงกับ CSS Selector ที่ระบุบนหน้า DOM โดยตรง มันมีความแม่นยำและรวดเร็วเพราะเป็นการเรียกใช้ Native Browser API โดยตรง ไม่มีการผ่านชั้นของไลบรารีใดๆ มาขัดขวาง
หากเปรียบเทียบกับการเรียกใช้ Element ผ่าน jQuery ที่เป็นการทำงานแบบ ‘Wrapper’ การใช้ document.querySelector() เปรียบเสมือนการเข้าถึงข้อมูลโดยตรงจากแหล่งกำเนิด ทำให้แอปพลิเคชันทำงานได้เร็วขึ้นอย่างเห็นได้ชัด และยังช่วยให้โค้ดของเรามีความเป็น ‘Pure’ อย่างแท้จริง ซึ่งเป็นปัจจัยสำคัญในการทำ Web Performance ที่ดีเยี่ยม
ตัวอย่างการใช้งาน (Conceptual Example)
แม้ว่าแนวคิดนี้จะเกี่ยวข้องกับ JavaScript DOM แต่ในการจัดการข้อมูลเชิงโครงสร้าง เราสามารถเปรียบเทียบหลักการนี้กับการเรียกข้อมูลที่แม่นยำจากฐานข้อมูลได้ โดยการใช้คำสั่งที่เจาะจงเพื่อดึงข้อมูลชุดเดียวเท่านั้น
SQL
-- ตัวอย่างการเลือก Element เดี่ยวใน JS: document.querySelector('#user-profile')
-- เทียบเท่ากับการเลือก Record เดี่ยวใน PostgreSQL
SELECT * FROM users WHERE user_id = 1;
ในตัวอย่างโค้ด SQL นี้ เรากำลังจำลองแนวคิดของการเลือก ‘Element เดี่ยว’ (Single Record) โดยใช้เงื่อนไขที่เจาะจง (user_id = 1) แทนการดึงข้อมูลทั้งหมด ซึ่งสะท้อนหลักการเดียวกันกับการใช้ document.querySelector() ที่มุ่งเน้นการค้นหาเป้าหมายเพียงตัวเดียวอย่างแม่นยำ
บทสรุป: พลังของ Pure JS
การเปลี่ยนมาใช้ document.querySelector() แทนการพึ่งพาไลบรารีภายนอกเพื่อการเลือก Element ไม่เพียงแต่ช่วยให้โค้ดของเราดูทันสมัยและ ‘Pure’ ขึ้นเท่านั้น แต่ยังส่งผลดีต่อประสิทธิภาพ (Performance) ของแอปพลิเคชันอย่างมหาศาล การเรียนรู้และทำความเข้าใจการทำงานของ DOM API ดั้งเดิมจึงเป็นทักษะที่นักพัฒนาทุกคนควรมี เพื่อสร้างสรรค์เว็บแอปพลิเคชันที่รวดเร็ว มีขนาดเล็ก และยั่งยืน