การแก้ไขแอตทริบิวต์และคลาส
ใช้ setAttribute และ API ของ classList
การแก้ไขแอตทริบิวต์และคลาส เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
แอตทริบิวต์และคลาส
องค์ประกอบมีแอตทริบิวต์ (เช่น href หรือ data-id) และคลาส CSS โดย JavaScript มีส่วนเชื่อมต่อที่ช่วยให้คุณอ่านและเปลี่ยนแปลงทั้งสองอย่างได้อย่างแม่นยำ
getAttribute
getAttribute อ่านค่าของแอตทริบิวต์เป็นสตริง หรือคืนค่าเป็น null หากไม่มีแอตทริบิวต์นั้น
const link = document.querySelector("a");
console.log(link.getAttribute("href"));setAttribute
setAttribute สร้างหรืออัปเดตแอตทริบิวต์ โดยค่าจะเป็นสตริงเสมอ
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");removeAttribute และ hasAttribute
ใช้ removeAttribute เพื่อลบแอตทริบิวต์หนึ่งรายการ และใช้ hasAttribute เพื่อตรวจสอบว่ามีแอตทริบิวต์นั้นอยู่หรือไม่
if (link.hasAttribute("target")) {
link.removeAttribute("target");
}พร็อพเพอร์ตีเทียบกับแอตทริบิวต์
แอตทริบิวต์จำนวนมากมีพร็อพเพอร์ตีขององค์ประกอบที่สอดคล้องกันด้วย (เช่น element.id หรือ input.value) พร็อพเพอร์ตีสะท้อนสถานะปัจจุบัน ส่วนแอตทริบิวต์มักเก็บค่าเริ่มต้นจาก HTML
input.value; // current value
input.getAttribute("value"); // original defaultชุดข้อมูลสำหรับ data-*
แอตทริบิวต์ data-* แบบกำหนดเองจะแสดงผ่านออบเจ็กต์ dataset โดยใช้คีย์แบบ camelCase
const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open"; // sets data-stateภาพรวมของ classList
classList เป็นออบเจ็กต์ที่อัปเดตตามสถานะปัจจุบันสำหรับจัดการคลาส โดยไม่ต้องแก้ไขสตริงของ className ด้วยตนเอง
const box = document.querySelector(".box");
console.log(box.classList);classList.add และ remove
add และ remove รับชื่อคลาสได้อย่างน้อยหนึ่งชื่อ และจัดการกรณีชื่อซ้ำหรือไม่มีคลาสนั้นอยู่อย่างเหมาะสมโดยไม่ทำให้เกิดข้อผิดพลาด
box.classList.add("active", "highlight");
box.classList.remove("hidden");classList.toggle
toggle จะเพิ่มคลาสหากยังไม่มี และลบคลาสหากมีอยู่แล้ว พร้อมคืนค่าบูลีนที่แสดงสถานะใหม่ อาร์กิวเมนต์ตัวที่สองจะบังคับให้เปิดหรือปิดได้
box.classList.toggle("open");
box.classList.toggle("open", true); // force addclassList.contains และ replace
contains ตรวจสอบว่ามีคลาสนั้นอยู่หรือไม่ และ replace แทนที่คลาสหนึ่งด้วยอีกคลาสหนึ่งในตำแหน่งเดิม
if (box.classList.contains("active")) {
box.classList.replace("active", "inactive");
}เหตุผลที่ classList ดีกว่า className
การแก้ไข className ในรูปสตริงอาจลบคลาสอื่นโดยไม่ตั้งใจ ส่วน classList จะเปลี่ยนเฉพาะคลาสที่ต้องการอย่างปลอดภัย
box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the restตรวจสอบความเข้าใจ
เลือกพฤติกรรมการสลับสถานะ
สรุปทบทวน
อ่านและเขียนแอตทริบิวต์ด้วย getAttribute/setAttribute/removeAttribute/hasAttribute และเข้าถึง data-* ผ่าน dataset จัดการคลาสด้วยเมธอดของ classList ได้แก่ add, remove, toggle, contains และ replace ซึ่งปลอดภัยกว่าการเขียนทับ className
คำถามที่พบบ่อย
บทเรียน “การแก้ไขแอตทริบิวต์และคลาส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแก้ไขแอตทริบิวต์และคลาส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแก้ไขแอตทริบิวต์และคลาส”
ใช้ setAttribute และ API ของ classList คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การแก้ไขแอตทริบิวต์และคลาส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปลี่ยนข้อความและเนื้อหา HTML
- การสร้างและแทรกองค์ประกอบ
- การแก้ไขแอตทริบิวต์และคลาส
- การลบและแทนที่โหนด