تابز مدیا | آموزش قدم به قدم برنامه نویسی

آیدی (id)

1️⃣ تعریف

ویژگی id یک شناسه یکتا برای هر عنصر HTML تعریف می‌کنه.

هر عنصر فقط یک id می‌تونه داشته باشه.
مقدار id باید در کل صفحه منحصربه‌فرد (Unique) باشه.
از id برای انتخاب دقیق یک عنصر در CSS و JavaScript استفاده می‌کنیم.

2️⃣ قوانین مهم

مقدار id نمی‌تونه با عدد شروع بشه.
حروف بزرگ و کوچک تفاوت دارن (Case-Sensitive).
در کل سند HTML نمی‌تونیم دو تا id یکسان داشته باشیم.

3️⃣ مثال ساده با CSS


<!DOCTYPE html>
<html>
<head>
  <style>
    #main-title {
      color: blue;
      text-align: center;
    }
  </style>
</head>
<body>

<h1 id="main-title">این یک تیتر با id است</h1>

</body>
</html>

👉 اینجا فقط همین یک h1 استایل می‌گیره چون id یکتا است.

4️⃣ استفاده در JavaScript


<p id="msg">سلام دنیا</p>
<button onclick="document.getElementById('msg').innerText='سلام از جاوااسکریپت'">
  تغییر متن
</button>

👉 با getElementById خیلی راحت می‌تونیم اون عنصر رو بگیریم.

5️⃣ کاربرد id در لینک‌دهی داخلی (Anchor Links)


<h2 id="section1">بخش ۱</h2>
<a href="#section1">برو به بخش ۱</a>

👉 وقتی روی لینک کلیک کنی، مرورگر مستقیم میره به همون بخشی که id داره.

📌 تفاوت `id` و `class`

ویژگی	id	class
یکتا بودن	✅ فقط یکبار در کل صفحه	❌ می‌تونه روی چند عنصر تکرار بشه
تعداد در یک عنصر	فقط یکی	می‌تونه چندتا باشه
کاربرد اصلی	شناسایی دقیق یک عنصر خاص	گروه‌بندی چند عنصر
در CSS	با `#id` انتخاب میشه	با `.class` انتخاب میشه

🔹 به زبان ساده:

class = برای گروه‌بندی چندتا عنصر (مثلا همه دکمه‌ها).
id = برای یک عنصر خاص (مثلا لوگوی سایت یا هدر اصلی).