การเข้าถึง data-* ด้วย dataset ใน JavaScript
อ่านและเขียนแอตทริบิวต์ข้อมูลกำหนดเองผ่าน API ของ dataset
การเข้าถึง data-* ด้วย dataset ใน JavaScript เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชุดคำสั่ง dataset คืออะไร
องค์ประกอบ HTML ทุกองค์ประกอบจะแสดงแอตทริบิวต์ data-* ผ่านคุณสมบัติ dataset ซึ่งเป็น DOMStringMap ที่จับคู่ชื่อแอตทริบิวต์กับค่า โดยไม่จำเป็นต้องเรียกใช้ getAttribute()
การจับคู่แอตทริบิวต์กับคุณสมบัติ
data-user-id จะกลายเป็น el.dataset.userId ยัติภังค์ในชื่อแอตทริบิวต์จะถูกแปลงเป็น camelCase ในคุณสมบัติของ dataset การเข้าถึง data-item-count จะใช้ el.dataset.itemCount
การอ่านค่า
อ่านแอตทริบิวต์ข้อมูลได้ดังนี้: const id = el.dataset.userId ค่าทั้งหมดใน dataset เป็นสตริง โปรดแปลงค่าตัวเลขด้วย Number() หรือ parseInt() ตามต้องการ แอตทริบิวต์ที่ไม่ได้กำหนดจะคืนค่าเป็น undefined ไม่ใช่ null
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);การเขียนค่า
กำหนดแอตทริบิวต์ข้อมูลผ่าน dataset ได้ดังนี้: el.dataset.state = "active" การทำเช่นนี้จะสร้างหรืออัปเดตแอตทริบิวต์ HTML data-state การเปลี่ยนแปลงแอตทริบิวต์จะแสดงใน DOM ทันที และสามารถตรวจจับได้ด้วย MutationObserver
การลบค่า
ลบแอตทริบิวต์ข้อมูลได้ดังนี้: delete el.dataset.userId แอตทริบิวต์ data-user-id ที่เกี่ยวข้องจะถูกนำออกจากองค์ประกอบ นอกจากนี้ยังใช้ el.removeAttribute("data-user-id") เพื่อนำออกอย่างชัดเจนได้
การวนซ้ำ dataset
dataset เป็น DOMStringMap ซึ่งสามารถวนซ้ำด้วยลูป for...in หรือกระจายค่าเข้าไปใน Object.entries ได้ดังนี้: Object.entries(el.dataset).forEach(([key, value]) => { ... }) วิธีนี้มีประโยชน์สำหรับการอ่านแอตทริบิวต์ข้อมูลทั้งหมดขององค์ประกอบเป็นชุด
การใช้ dataset สำหรับสถานะคอมโพเนนต์
จัดเก็บสถานะคอมโพเนนต์ขนาดเล็กไว้ในแอตทริบิวต์ข้อมูล แทนการใช้ช่องป้อนข้อมูลที่ซ่อนอยู่หรือตัวแปร JavaScript คอมโพเนนต์แท็บสามารถจัดเก็บดัชนีแท็บที่ใช้งานอยู่ใน data-active-tab บนองค์ประกอบบรรจุ และสคริปต์ใด ๆ ก็สามารถอ่านค่าได้โดยไม่ต้องใช้ตัวแปรร่วมกัน
การมอบหมายเหตุการณ์ด้วย dataset
ในรายการที่มีหลายรายการ ให้ผูกตัวรับฟังการคลิกเพียงตัวเดียวไว้กับองค์ประกอบบรรจุ เมื่อมีการคลิก ให้อ่าน dataset ของเป้าหมายที่ถูกคลิก: e.target.closest("[data-id]").dataset.id ตัวรับฟังเพียงตัวเดียวสามารถจัดการทุกรายการได้โดยไม่ต้องมีค่าใช้จ่ายจากการผูกตัวรับฟังแยกแต่ละรายการ
dataset เทียบกับคุณสมบัติกำหนดเอง
ใช้ dataset สำหรับข้อมูลที่ต้องอ่านได้จาก HTML เช่น เมทาดาทาที่เรนเดอร์จากเซิร์ฟเวอร์และข้อมูลที่ตัวเลือก CSS เข้าถึงได้ ใช้ตัวแปร JavaScript สำหรับสถานะชั่วคราวขณะทำงานที่ไม่จำเป็นต้องมองเห็นใน HTML การใช้ทั้งสองแบบปะปนกันจะเพิ่มความซับซ้อนโดยไม่จำเป็น
ข้อควรระวังเรื่องการแปลงชนิดข้อมูล
dataset จะคืนค่าเป็นสตริงเสมอ el.dataset.active === true จึงเป็นเท็จเสมอ โปรดเปรียบเทียบกับ el.dataset.active === "true" หรือแปลงค่าเป็นชนิดอื่นดังนี้: el.dataset.active === "true" สถานะบูลีนที่จัดเก็บใน dataset จำเป็นต้องเปรียบเทียบเป็นสตริง
dataset เทียบกับ getAttribute
ทั้งสองวิธีใช้สำหรับอ่านแอตทริบิวต์ข้อมูล dataset สะดวกกว่าสำหรับการเข้าถึงแบบ camelCase ส่วน getAttribute ต้องใช้ชื่อแอตทริบิวต์เต็ม รวมคำนำหน้า "data-" ด้วย โปรดเลือกใช้ dataset ในโค้ดสมัยใหม่ และใช้ getAttribute เมื่อต้องวนอ่านแอตทริบิวต์ที่ไม่ใช่ข้อมูลควบคู่กับแอตทริบิวต์ข้อมูล
ตรวจสอบความรู้
แอตทริบิวต์ HTML data-user-id จะปรากฏในออบเจ็กต์ dataset ของ JavaScript อย่างไร
สรุป
ชุดคำสั่ง dataset จะแปลงแอตทริบิวต์ data-* เป็นคุณสมบัติ JavaScript แบบ camelCase เพื่อให้เข้าถึง อ่าน เขียน และลบได้ง่าย ชุดคำสั่งนี้ช่วยให้จัดเก็บสถานะคอมโพเนนต์ ใช้รูปแบบการมอบหมายเหตุการณ์ และส่งข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ได้โดยไม่ต้องใช้ช่องป้อนข้อมูลที่ซ่อนอยู่หรือตัวแปรส่วนกลาง
คำถามที่พบบ่อย
บทเรียน “การเข้าถึง data-* ด้วย dataset ใน JavaScript” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเข้าถึง data-* ด้วย dataset ใน JavaScript” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเข้าถึง data-* ด้วย dataset ใน JavaScript”
อ่านและเขียนแอตทริบิวต์ข้อมูลกำหนดเองผ่าน API ของ dataset คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเข้าถึง data-* ด้วย dataset ใน JavaScript” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์ data-* และแบบแผนการตั้งชื่อ
- การเข้าถึง data-* ด้วย dataset ใน JavaScript
- การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS
- รูปแบบการใช้งานจริง: คำแนะนำเครื่องมือและการติดตามสถานะ