ด้วยโค้ดสนิปเพทที่สะดวกนี้ คุณสามารถเพิ่มแอตทริบิวต์ ID ให้กับอิลีเมนต์ HTML ที่มีอยู่แล้วได้โดยใช้ JavaScript
โค้ด
let featuredTitle = document.querySelector("h1"); featuredTitle.id = "featured-title";สิ่งที่เกิดขึ้นในวิดีโอ:
- ก่อนอื่น เราค้นหาอิลีเมนต์ h1 บนหน้าเว็บและกำหนดให้กับตัวแปรชื่อ
featuredTitle - จากนั้นเราแนบแอตทริบิวต์ ID เข้ากับตัวแปรนั้นผ่านสัญลักษณ์จุด (variableName.attribute) ในกรณีนี้คือ
featuredTitle.idและให้ค่าเป็น'featured-title'
คุณสามารถทำเช่นนี้กับอิลีเมนต์ที่มีอยู่ใน DOM ใดๆ ได้
ตอนนี้คุณสามารถใช้ ID ที่สร้างขึ้นแบบไดนามิกนี้ เพื่อเชื่อมต่อกับ CSS (เพื่อจัดสไตล์อิลีเมนต์ผ่าน ID ใหม่) หรือกับ JavaScript สำหรับจัดการพฤติกรรมแบบโต้ตอบ (เช่นเหตุการณ์คลิก)
