การเลือกองค์ประกอบด้วย querySelector
ค้นหาองค์ประกอบโดยใช้ตัวเลือก CSS
การเลือกองค์ประกอบด้วย querySelector เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำความรู้จัก querySelector
querySelector ส่งคืนองค์ประกอบ แรก ที่ตรงกับตัวเลือก CSS หรือส่งคืน null หากไม่พบสิ่งที่ตรงกัน คุณสมบัตินี้มีอยู่ใน document และในทุกองค์ประกอบ
const title = document.querySelector("h1");
console.log(title.textContent);ตัวเลือก CSS ใด ๆ ก็ใช้ได้
จุดเด่นของ querySelector คือยอมรับตัวเลือกแบบเดียวกับที่ใช้ใน CSS ได้แก่ แท็ก คลาส รหัส แอตทริบิวต์ และการผสมกัน
document.querySelector("#main"); // by id
document.querySelector(".card"); // by class
document.querySelector("input[type=email]"); // by attributequerySelectorAll
querySelectorAll ส่งคืนองค์ประกอบทั้งหมดที่ตรงกันในรูปแบบ NodeList แบบคงที่ แม้จะไม่พบสิ่งที่ตรงกันเลย ก็จะส่งคืนรายการว่าง ไม่ใช่ null
const cards = document.querySelectorAll(".card");
console.log(cards.length);การวนซ้ำผลลัพธ์
NodeList จาก querySelectorAll รองรับ forEach ได้โดยตรง จึงทำให้การวนซ้ำสะอาดและอ่านง่าย
const items = document.querySelectorAll("li");
items.forEach((li) => {
console.log(li.textContent);
});ตัวเลือกองค์ประกอบลูกหลาน
คุณสามารถเลือกองค์ประกอบที่ซ้อนอยู่ได้โดยใช้ช่องว่าง ซึ่งหมายถึงองค์ประกอบลูกหลานเช่นเดียวกับใน CSS วิธีนี้จะค้นหา .price ทุกตัวที่อยู่ภายใน .product
const prices = document.querySelectorAll(".product .price");การรวมคลาส
การเชื่อมคลาสโดยไม่มีช่องว่างหมายความว่าองค์ประกอบต้องมีคลาส ทั้งหมด เหล่านั้น ในที่นี้เราจะเลือกปุ่มที่เป็นทั้งแบบหลักและแบบขนาดใหญ่
const btn = document.querySelector("button.primary.large");การค้นหาภายในขอบเขต
การเรียก querySelector บนองค์ประกอบแทนที่จะเป็น document จะค้นหาเฉพาะภายในองค์ประกอบนั้น ทำให้การค้นหาอยู่ในขอบเขตและรวดเร็ว
const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");คลาสเสมือน
คลาสเสมือนเชิงโครงสร้าง เช่น :first-child และ :nth-of-type ก็ใช้ได้เช่นกัน
document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");การจัดการเมื่อไม่พบผลลัพธ์
เนื่องจาก querySelector อาจส่งคืน null คุณจึงควรตรวจสอบก่อนใช้ผลลัพธ์ เพื่อหลีกเลี่ยง TypeError
const banner = document.querySelector(".banner");
if (banner) {
banner.classList.add("hidden");
}ตัวเลือกแอตทริบิวต์
ตัวเลือกแอตทริบิวต์ช่วยให้คุณเลือกองค์ประกอบจากแอตทริบิวต์ข้อมูลได้ เหมาะอย่างยิ่งสำหรับการเชื่อมต่อกับองค์ประกอบโดยไม่ต้องพึ่งคลาส
const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");querySelector เทียบกับ API รุ่นเก่า
querySelector ยืดหยุ่นกว่า getElementById เพราะยอมรับตัวเลือกได้ทุกแบบ แต่การค้นหาด้วยรหัสยังคงเร็วกว่าเล็กน้อย ควรเลือกเครื่องมือให้เหมาะกับงาน
document.querySelector("#nav"); // flexible
document.getElementById("nav"); // fastest for idsตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเรื่องตัวเลือกของคุณ
ทบทวน
คุณได้เรียนรู้ว่า querySelector ส่งคืนผลลัพธ์แรกที่ตรงกัน หรือ null หากไม่พบ และ querySelectorAll ส่งคืน NodeList แบบคงที่ที่ประกอบด้วยผลลัพธ์ที่ตรงกันทั้งหมด ทั้งสองอย่างรองรับตัวเลือก CSS แบบเต็มรูปแบบและกำหนดขอบเขตให้ค้นหาภายในองค์ประกอบแม่ได้ ควรตรวจสอบ null เสมอเมื่อใช้ querySelector
คำถามที่พบบ่อย
บทเรียน “การเลือกองค์ประกอบด้วย querySelector” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเลือกองค์ประกอบด้วย querySelector” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเลือกองค์ประกอบด้วย querySelector”
ค้นหาองค์ประกอบโดยใช้ตัวเลือก CSS คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การเลือกองค์ประกอบด้วย querySelector” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเลือกองค์ประกอบด้วย querySelector
- getElementById และ getElementsByClassName
- การไล่ดูพาเรนต์ ลูก และพี่น้อง
- NodeList เทียบกับ HTMLCollection