Frontend Academy · บทเรียน

querySelector และ querySelectorAll

ค้นหาองค์ประกอบเดี่ยวและหลายองค์ประกอบด้วยสตริงตัวเลือก CSS และทำความเข้าใจความแตกต่างระหว่าง NodeList กับ HTMLCollection

querySelector และ querySelectorAll เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

DOM คืออะไร

โมเดลวัตถุเอกสารคือโครงสร้างต้นไม้ของอ็อบเจ็กต์ JavaScript ที่แทนโครงสร้าง HTML JavaScript ใช้ DOM เพื่ออ่าน แก้ไข เพิ่ม และลบองค์ประกอบ ทำให้หน้าเว็บมีการโต้ตอบแบบไดนามิก

getElementById

ตัวเลือกแบบดั้งเดิม document.getElementById('myId') จะคืนค่าองค์ประกอบที่มีรหัสนั้น หรือคืนค่า null หากไม่พบ ทำงานได้รวดเร็ว แต่ใช้ได้กับรหัสเท่านั้น

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — องค์ประกอบเดียว

document.querySelector(cssSelector) จะคืนค่าองค์ประกอบแรกที่ตรงกับตัวเลือก CSS ใดตัวเลือกหนึ่ง หากไม่พบจะคืนค่า null ยืดหยุ่นกว่า getElementById

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — หลายองค์ประกอบ

document.querySelectorAll(cssSelector) จะคืนค่า NodeList แบบคงที่ ที่ประกอบด้วยองค์ประกอบทั้งหมดที่ตรงกัน รายการนี้ไม่ใช่อาร์เรย์แบบมีชีวิต คุณจึงต้องวนซ้ำผ่านรายการ ใช้ Array.from() หรือไวยากรณ์กระจายค่าเพื่อใช้เมธอดของอาร์เรย์

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

การค้นหาแบบจำกัดขอบเขต

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

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList เทียบกับคอลเลกชัน HTML

NodeList (จาก querySelectorAll) เป็นแบบคงที่ โดยสะท้อน DOM ณ เวลาที่ค้นหา ส่วนคอลเลกชัน HTML (จาก getElementsByClassName และอื่น ๆ) เป็นแบบมีชีวิต โดยจะอัปเดตโดยอัตโนมัติเมื่อ DOM เปลี่ยนแปลง ทั้งสองมีลักษณะคล้ายอาร์เรย์ แต่ไม่ใช่อาร์เรย์

การไล่ดู DOM

จากองค์ประกอบใด ๆ คุณสามารถนำทางไปยังองค์ประกอบต่าง ๆ ได้ด้วย element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

การตรวจสอบว่าองค์ประกอบมีอยู่หรือไม่

ตรวจสอบเสมอว่า querySelector ไม่ได้คืนค่า null ก่อนใช้ผลลัพธ์ โดยเฉพาะกับองค์ประกอบที่อาจไม่มีอยู่ในทุกหน้า

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() และ closest()

element.matches(selector) จะคืนค่าเป็นจริงหากองค์ประกอบตรงกับตัวเลือก ส่วน element.closest(selector) จะไล่ขึ้นไปตามต้นไม้ DOM และคืนค่าบรรพบุรุษตัวแรกที่ตรงกับตัวเลือก หรือคืนค่า null

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) จะคืนค่าเป็นจริงหากองค์ประกอบลูกอยู่ภายในองค์ประกอบแม่ หรือเป็นองค์ประกอบแม่เอง มีประโยชน์สำหรับตรวจสอบว่าการคลิกเกิดขึ้นนอกโมดัลหรือเมนูแบบดรอปดาวน์หรือไม่

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

ประสิทธิภาพ: ลดการค้นหา DOM ให้น้อยที่สุด

การค้นหา DOM ไม่ได้ไม่มีต้นทุน ควรแคชผลลัพธ์ไว้ในตัวแปรแทนการเรียก querySelector ซ้ำ ๆ ในลูป ให้รวมการอ่าน DOM ไว้ด้วยกัน และรวมการเขียน DOM ไว้ด้วยกัน เพื่อหลีกเลี่ยงการคำนวณเลย์เอาต์ซ้ำไปซ้ำมา

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

ตรวจสอบอย่างรวดเร็ว

เมธอดใดคืนค่า NodeList แบบคงที่ ขององค์ประกอบทั้งหมดที่ตรงกัน?

ทบทวน: การเลือกองค์ประกอบ DOM

querySelector คืนค่ารายการที่ตรงกันรายการแรก querySelectorAll คืนค่ารายการที่ตรงกันทั้งหมดเป็น NodeList แบบคงที่ จำกัดขอบเขตการค้นหาไว้ในโครงสร้างย่อยเพื่อประสิทธิภาพ แคชผลลัพธ์การค้นหา ใช้ closest() สำหรับการมอบหมายเหตุการณ์ และตรวจสอบ null เสมอก่อนใช้องค์ประกอบที่ค้นพบ

คำถามที่พบบ่อย

บทเรียน “querySelector และ querySelectorAll” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “querySelector และ querySelectorAll” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “querySelector และ querySelectorAll”

ค้นหาองค์ประกอบเดี่ยวและหลายองค์ประกอบด้วยสตริงตัวเลือก CSS และทำความเข้าใจความแตกต่างระหว่าง NodeList กับ HTMLCollection คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “querySelector และ querySelectorAll” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy