ในโลกของการพัฒนาเว็บแอปพลิเคชันที่เปลี่ยนแปลงอย่างรวดเร็ว การจัดการกับโครงสร้าง DOM (Document Object Model) อย่างมีประสิทธิภาพถือเป็นหัวใจสำคัญของงานโค้ดดิ้งที่ดี นักพัฒนามักต้องเผชิญหน้ากับการวนลูปเพื่อเข้าถึงและปรับเปลี่ยน Element จำนวนมาก ซึ่งในอดีต jQuery ได้มอบความสะดวกสบายด้วยเมธอดอย่าง $.each() แต่เมื่อเวลาผ่านไป และมาตรฐาน JavaScript (ES6+) มีการพัฒนาขึ้นเรื่อยๆ การทำความเข้าใจเครื่องมือที่ทันสมัยกว่าและมีประสิทธิภาพสูงกว่าจึงเป็นสิ่งจำเป็นสำหรับนักพัฒนารุ่นใหม่
เจาะลึกรายละเอียดและประเด็นสำคัญ
แก่นแท้ของการเปลี่ยนมาใช้ document.querySelectorAll() ร่วมกับเมธอด forEach() คือการกลับไปใช้พลังของ Native Browser API โดยตรง แทนที่จะพึ่งพา Wrapper Library อย่าง jQuery การทำเช่นนี้ไม่เพียงแต่ช่วยลดขนาด Bundle Size ของโปรเจกต์ แต่ยังเพิ่มประสิทธิภาพในการทำงาน (Performance) เนื่องจากเราหลีกเลี่ยง Overhead ที่เกิดจากการห่อหุ้ม (Wrapping) DOM Element ด้วยโครงสร้างของไลบรารีภายนอก ทำให้โค้ดของเรามีความเบาและรวดเร็วขึ้นอย่างเห็นได้ชัด
นอกจากเรื่องความเร็วแล้ว ยังเป็นเรื่องของแนวทางการเขียนโค้ดที่ทันสมัย (Modern JavaScript Practices) ด้วย querySelectorAll() จะคืนค่าเป็น NodeList ซึ่งในเวอร์ชันใหม่ๆ สามารถแปลงให้เป็น Array ได้ง่าย และเมธอด forEach() เป็นมาตรฐานของ Array ทำให้การวนลูปมีความชัดเจน อ่านง่าย และสอดคล้องกับหลักการเขียนโค้ดเชิงฟังก์ชัน (Functional Programming) มากกว่าการใช้รูปแบบการวนซ้ำที่เฉพาะเจาะจงของ jQuery
Plain Text
// ❌ วิธีเก่า (jQuery) - ต้องโหลดไลบรารีภายนอก
$(document).ready(function() {
$('.item').each(function(index, element) {
$(element).css('opacity', '0.8'); // ใช้ jQuery selector และ method
});
});
// ✅ วิธีใหม่ (Vanilla JS / ES6+) - เร็วและ Native
const elements = document.querySelectorAll('.item');
elements.forEach((element) => {
element.style.opacity = '0.8'; // เข้าถึง DOM โดยตรง
});