classlist. JavaScript Dom

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#classlist

classList ใน JavaScript DOM คือคุณสมบัติ (Property) ที่ช่วยให้เราสามารถ จัดการกับรายการของ Class CSS ที่กำหนดให้กับองค์ประกอบ (Element) HTML นั้น ๆ ได้อย่างง่ายดายและมีประสิทธิภาพกว่าการแก้ไขคุณสมบัติ className โดยตรง💡 classList คืออะไร?เมื่อคุณเข้าถึง element.classList คุณจะได้รับออบเจกต์ที่เรียกว่า DOMTokenList ซึ่งเป็นรายการ (List) ของชื่อ Class ทั้งหมดที่ถูกคั่นด้วยช่องว่าง (Space) ในคุณสมบัติ class ของ Element นั้นเองHTML<div id="myDiv" class="active large-text highlight">...</div>

JavaScriptlet myDiv = document.getElementById('myDiv');

console.log(myDiv.classList);

// ผลลัพธ์: DOMTokenList(3) ["active", "large-text", "highlight"]

🛠️ เมธอด (Methods) หลักของ classListออบเจกต์ DOMTokenList มีเมธอดที่มีประโยชน์สำหรับการเพิ่ม, ลบ, และตรวจสอบ Class ต่าง ๆ ดังนี้:เมธอดคำอธิบายตัวอย่างการใช้งาน.add(class1, class2, ...)เพิ่ม Class หนึ่งชื่อหรือมากกว่าmyDiv.classList.add('new-style');.remove(class1, class2, ...)ลบ Class หนึ่งชื่อหรือมากกว่าmyDiv.classList.remove('large-text', 'highlight');.toggle(class, [force])สลับ Class: ถ้ามี Class อยู่แล้วจะลบออก ถ้าไม่มีจะเพิ่มเข้าไปmyDiv.classList.toggle('is-hidden');.contains(class)ตรวจสอบ ว่ามี Class นั้น ๆ อยู่หรือไม่ (คืนค่า true หรือ false)if (myDiv.classList.contains('active')) { ... }.replace(oldClass, newClass)แทนที่ Class เก่าด้วย Class ใหม่myDiv.classList.replace('new-style', 'updated-style');วิธีการใช้งานเริ่มต้นจากการเข้าถึง Element ที่ต้องการจัดการก่อน จากนั้นจึงเรียกใช้เมธอดบนคุณสมบัติ classList:JavaScript// 1. เข้าถึง Element

const button = document.querySelector('#submit -btn');

// 2. เพิ่ม Class

button.classList.add('loading', 'disabled');

// <button id="submit-btn" class="loading disabled">...

// 3. ตรวจสอบว่ามี Class หรือไม่

let isLoading = button.classList.contains('loading'); // true

// 4. ลบ Class ออก

button.classList.remove('loading');

// <button id="submit-btn" class="disabled">...

// 5. สลับ Class (ใช้บ่อยสำหรับการเปิด/ปิดเมนู)

button.addEventListener('click', () => {

// หากมี 'active' จะลบออก หากไม่มีจะเพิ่มเข้าไป

button.classList.toggle('active');

});

classList ช่วยให้โค้ดของคุณ อ่านง่ายขึ้น และ จัดการ Class ได้อย่างแม่นยำ กว่าการจัดการสตริง className ด้วยตัวเอง