0Pricing
JavaScript Academy · บทเรียน

getElementById และ getElementsByClassName

ใช้วิธีการเลือกแบบดั้งเดิม

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

getElementById

getElementById ส่งคืนองค์ประกอบเดียวที่มี id ตรงกัน หรือส่งคืน null รหัสต้องไม่ซ้ำกันภายในหน้าเว็บ ดังนั้นเมธอดนี้จึงส่งคืนองค์ประกอบเดียว

const header = document.getElementById("header");
console.log(header.tagName);

ไม่ต้องใส่สัญลักษณ์แฮช

ต่างจากตัวเลือก CSS ตรงที่คุณต้องส่งรหัสจริงโดย ไม่ใส่ # การส่ง "#header" จะไม่ตรงกับองค์ประกอบใด

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName ส่งคืน HTMLCollection แบบ เปลี่ยนแปลงตามข้อมูล ซึ่งประกอบด้วยองค์ประกอบทั้งหมดที่มีคลาสที่ระบุ

const cards = document.getElementsByClassName("card");
console.log(cards.length);

HTMLCollection เปลี่ยนแปลงตามข้อมูล

คอลเลกชันจะอัปเดตโดยอัตโนมัติเมื่อ DOM เปลี่ยนแปลง หากคุณเพิ่ม .card ใหม่ในภายหลัง ค่า cards.length ก็จะเพิ่มขึ้นโดยไม่ต้องค้นหาใหม่

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

การเข้าถึงคอลเลกชันด้วยดัชนี

เข้าถึงรายการต่าง ๆ ด้วยดัชนี HTMLCollection มีลักษณะคล้ายอาร์เรย์ แต่ ไม่ใช่อาร์เรย์จริง

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

ไม่มี forEach โดยตรง

เนื่องจากมีลักษณะคล้ายอาร์เรย์แต่ไม่ใช่อาร์เรย์ HTMLCollection จึงไม่มี forEach คุณต้องแปลงมันก่อน หรือใช้ลูป for แบบปกติ

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName ส่งคืน HTMLCollection แบบเปลี่ยนแปลงตามข้อมูล ซึ่งประกอบด้วยทุกองค์ประกอบของแท็กที่ระบุ เช่น ย่อหน้าทั้งหมด

const paras = document.getElementsByTagName("p");
console.log(paras.length);

หลายคลาส

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

const items = document.getElementsByClassName("btn primary");

กำหนดขอบเขตให้กับองค์ประกอบ

เมธอดเหล่านี้มีอยู่ในองค์ประกอบด้วยเช่นกัน โดยจะจำกัดการค้นหาไว้ที่องค์ประกอบลูกหลานขององค์ประกอบนั้น

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

การแปลงเป็นอาร์เรย์

หากต้องการใช้เมธอดของอาร์เรย์ เช่น map หรือ filter ให้กระจายคอลเลกชันลงในอาร์เรย์จริง

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

ควรใช้สิ่งใดเมื่อใด

ใช้ getElementById สำหรับการค้นหารหัสที่ไม่ซ้ำกันอย่างรวดเร็ว เลือกใช้ querySelectorAll เมื่อต้องการภาพข้อมูลแบบคงที่หรือตัวเลือกที่ซับซ้อน และใช้กลุ่ม getElementsBy* เมื่อต้องการคอลเลกชันที่เปลี่ยนแปลงตามข้อมูลโดยเฉพาะ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เลือกพฤติกรรมที่ถูกต้อง

ทบทวน

คุณได้เรียนรู้ว่า getElementById ใช้ค้นหาองค์ประกอบหนึ่งรายการด้วยรหัสจริงโดยไม่ใส่ #, getElementsByClassName และ getElementsByTagName ส่งคืนคอลเลกชัน HTML ที่เปลี่ยนแปลงตามข้อมูล คอลเลกชันประเภทนี้ต้องแปลงผ่าน Array.from ก่อนจึงจะใช้เมธอดของอาร์เรย์ได้ และไม่มี forEach เป็นของตัวเอง

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

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

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

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

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

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

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

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

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

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

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

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

  1. การเลือกองค์ประกอบด้วย querySelector
  2. getElementById และ getElementsByClassName
  3. การไล่ดูพาเรนต์ ลูก และพี่น้อง
  4. NodeList เทียบกับ HTMLCollection
← กลับไปที่ JavaScript Academy