ใช้ Attributes ด้วย HTMLElement.dataset ง่ายกว่าที่คุณคิด !

 

คุณเคยใช้ attributes ที่ใช้เซตข้อมูลให้กับ Element ต่างๆเพื่อให้เป็นเงื่อนไขต่างกับระบบที่ต้องการเขียน

เช่น คุณต้องเซต เมนู onClick กับ Element ที่ต้องการโดนกำกับ attributes ให้กับ Element ว่า itemid อะไร

<div itemid="01"></div>

โดนวิธีเรียกคุณอาจใช้ 

    let attribute = element.getAttribute(attributeName);

โค๊ดยาวหรือป่าวลองใช้ dataset ดูหรือป่าวครับ 

แอตทริบิวต์ HTML data-*และ DOM ที่เกี่ยวข้อง dataset.property จะแก้ไขชื่อที่ใช้ร่วมกันตามตำแหน่งที่อ่านหรือเขียน: ใน HTML ชื่อแอตทริบิวต์ขึ้นต้นด้วยdata-. มีได้เฉพาะตัวอักษร ตัวเลข ขีดกลาง ( -) จุด ( ) .ทวิภาค ( :) และขีดล่าง ( _) อักษรตัวใหญ่ ASCII ( Aเป็น Z) จะถูกแปลงเป็นตัวพิมพ์เล็ก ตัวอย่างที่กว่า <div data-itemid="01" data-name="test"></div>

วิธีเรียกใช้

const dataAttrMap = element.dataset

dataAttrMap.itemid

ตัวอย่างผลลัพธ์

// dataAttrMap.itemid ===  01

// dataAttrMap.name === test