วิธีการ Select DOM Element โดยไม่ใช้ jQuery

โดยส่วนมากเวลาที่เราต้องการ select DOM element เรามักจะนึกถึง jQuery เพราะใช้ง่าย และแทบจะเป็น library มาตรฐานสำหรับการพัฒนา web ในปัจจุบันไปแล้ว สำหรับบทความนี้ ผมอยากจะมาแนะนำการ select DOM element โดยไม่ใช้ jQuery (อาจจะด้วยเหตุผลใดก็ตาม) เมื่อก่อน เวลาเราจะ select DOM element เราก็มักจะนึกถึง methods ที่ชื่อว่า getElementById() กับ getElementByTagName() ซึ่งการใช้งานค่อนข้างจำกัด ไม่หลากหลายเท่าการใช้ CSS Selector เหมือนใน jQuery ซึ่งเป็นหนึ่งในเหตุผลว่าทำไม jQuery ถึงได้รับความนิยม หลายๆคน (รวมทั้งผมด้วย) ใช้ jQuery กันจนเคยชิน จนไม่รู้เลยว่าเดี๋ยวนี้ DOM selector APIs ได้รับการพัฒนาขึ้นจากเมื่อก่อนมาก ซึ่งในปัจจุบันรองรับการใช้งาน CSS selector แล้วด้วย ผ่านทาง APIs ที่ชื่อว่า querySelector() และ querySelectorAll() ทั้ง 2 APIs รองรับการใช้งาน CSS selector โดยมีความแตกต่างกันที่ querySelector() จะ return DOM element เพียงแค่ตัวเดียว ในขณะที่ querySelectorAll() จะ return DOM elements ทั้งหมดที่ตรงตามเงื่อนไข ส่วนวิธีการเรียกใช้งาน ดูตามตัวอย่างข้างล่างนี่เลยครับ

document.querySelector('#myheader') //returns the element with ID="myheader"
document.querySelector('p.description') //returns the P with class="description" element

document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
document.querySelectorAll('#biography, #gallery') //returns both elements "#biography" and "#gallery" (inclusive)

แหล่งที่มา : http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml