ویژگی‌های داده (data-*)

استفاده از data attributes برای ذخیره داده‌های سفارشی در HTML

ویژگی‌های داده (Data Attributes)

ویژگی‌های data-* برای ذخیره داده‌های سفارشی در عناصر HTML استفاده می‌شوند. این داده‌ها برای JavaScript قابل دسترسی هستند اما توسط مرورگر نمایش داده نمی‌شوند.

ساختار data attributes

نام ویژگی باید با data- شروع شود و بعد از آن یک نام معتبر (حروف، اعداد، خط تیره، زیرخط) بیاید:

<div data-user-id="123">کاربر</div>
<div data-product-price="99.99">محصول</div>
<div data-config='{"theme":"dark","lang":"fa"}'>تنظیمات</div>

دسترسی با JavaScript

می‌توان با JavaScript به data attributes دسترسی پیدا کرد:

// روش 1: dataset API
const element = document.querySelector('[data-user-id="123"]');
const userId = element.dataset.userId;

// روش 2: getAttribute
const userId = element.getAttribute('data-user-id');

// روش 3: querySelector
const element = document.querySelector('[data-user-id="123"]');

نام‌گذاری در JavaScript

در JavaScript، data-user-id به userId تبدیل می‌شود (kebab-case به camelCase):

کاربردهای data attributes

مقادیر JSON

می‌توان داده‌های پیچیده را به صورت JSON ذخیره کرد:

<div data-config='{"theme":"dark","lang":"fa","rtl":true}'>
  محتوا
</div>

<script>
  const config = JSON.parse(element.dataset.config);
  console.log(config.theme); // "dark"
</script>

تغییر مقادیر

می‌توان مقادیر data attributes را با JavaScript تغییر داد:

element.dataset.userId = "456";
element.setAttribute('data-user-id', "456");

انتخاب عناصر با data attributes

// انتخاب همه عناصر با data-user-id
const users = document.querySelectorAll('[data-user-id]');

// انتخاب با مقدار خاص
const user = document.querySelector('[data-user-id="123"]');

// انتخاب با مقدار شروع‌شونده
const users = document.querySelectorAll('[data-user-id^="1"]');

// انتخاب با مقدار حاوی
const users = document.querySelectorAll('[data-role*="admin"]');

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط