20- آموزش جاوااسکریپت | انتخابگرهای (Selectors) تک عنصر در DOM

HTML استفاده شده در این پست همان HTML پست قبلی است یک ul با کلاس collection داریم که شامل چند li با کلاس collection-item است و داخل هر آیتم نیز یک لینک قرار گرفته است در آموزش‌های قبلی با مفهوم کلی DOM آشنا شدیم و ویژگی‌های سند HTML را بررسی کردیم. در این بخش قصد داریم به سراغ متدهای انتخاب عناصر (Selectors) در جاوااسکریپت برویم. این متدها به ما اجازه می‌دهند تا عناصر یا گره‌های (Nodes) مشخصی را از DOM دریافت کرده و عملیات مختلفی روی آن‌ها انجام دهیم.

در گذشته از کتابخانه jQuery به طور گسترده برای دستکاری و انتخاب عناصر DOM استفاده می‌شد. اما امروزه جاوااسکریپت خالص (Vanilla JavaScript) بسیار پیشرفته و ساده شده است. استفاده از jQuery در اکثر پروژه‌ها غیرضروری است و فقط حجم پروژه را بالا می‌برد. توسعه‌دهندگان مدرن معمولاً استفاده از جاوااسکریپت خالص را برای تعامل با DOM ترجیح می‌دهند.

به طور کلی، انتخابگرها در جاوااسکریپت به دو دسته تقسیم می‌شوند:

1. انتخابگرهای تک‌عضوی (Single Element Selectors)
2. انتخابگرهای چندعضوی (Multiple Element Selectors)

در انتخابگرهای تک‌عضوی، حتی اگر کلاس یا تگی که جستجو می‌کنید در چندین بخش صفحه وجود داشته باشد، متد مورد نظر فقط اولین عنصر مطابق با شرط را برمی‌گرداند. در این آموزش روی دو انتخابگر تک‌عضوی تمرکز خواهیم کرد.

---

۱. متد document.getElementById

این متد قدیمی و پایه‌ای، عناصر را صرفاً بر اساس شناسه یا همان ویژگی id آن‌ها انتخاب می‌کند. شما نمی‌توانید کلاس یا نام تگ را به این متد پاس بدهید.

فرض کنید در سند HTML خود یک تگ <h5> با شناسه task-title داریم:

<h5 id="task-title">لیست کارها</h5>

برای انتخاب این عنصر و نمایش آن در کنسول، به شکل زیر عمل می‌کنیم:

console.log(document.getElementById('task-title'));

دریافت ویژگی‌ها (Attributes) از عنصر

وقتی عنصری را انتخاب کردید، می‌توانید ویژگی‌های مختلف آن را بخوانید:

const taskTitle = document.getElementById('task-title');

console.log(taskTitle.id);        // خروجی: task-title
console.log(taskTitle.className); // دریافت کلاس‌های عنصر به صورت رشته

تغییر استایل‌ها با جاوااسکریپت

یکی از کاربردهای انتخاب عناصر، اعمال تغییرات ظاهری به صورت پویا (مثلاً هنگام رخ دادن یک رویداد مانند کلیک یا هاور) است. برای تغییر استایل از ویژگی style استفاده می‌کنیم:

taskTitle.style.background = '#333';
taskTitle.style.color = '#fff';
taskTitle.style.padding = '5px';

// برای پنهان کردن یک عنصر
// taskTitle.style.display = 'none';

توجه: توصیه می‌شود برای استایل‌دهی‌های ثابت و اولیه صفحه از CSS استفاده کنید و تغییر استایل با جاوااسکریپت را به رفتارهای داینامیک و تعاملی اختصاص دهید.

تغییر محتوای عناصر

برای تغییر متن یا کدهای HTML داخل یک عنصر، سه ویژگی پرکاربرد وجود دارد:

// تغییر متن ساده
taskTitle.textContent = 'کارها';

// جایگزین برای textContent
taskTitle.innerText = 'کارهای من';

// تزریق تگ‌های HTML به همراه متن
taskTitle.innerHTML = '<span style="color: red">لیست کارها</span>';

---

۲. متد document.querySelector

این متد بسیار قدرتمندتر و مدرن‌تر از getElementById است. عملکرد آن کاملاً مشابه انتخابگرهای CSS (CSS Selectors) و کتابخانه jQuery است؛ یعنی می‌توانید عناصر را بر اساس تگ، کلاس، ID و حتی شبه‌کلاس‌ها (Pseudo-classes) انتخاب کنید.

مثال‌های پایه برای انتخاب عناصر:

// انتخاب بر اساس ID (با استفاده از علامت #)
console.log(document.querySelector('#task-title'));

// انتخاب بر اساس کلاس (با استفاده از علامت نقطه)
console.log(document.querySelector('.card-title'));

// انتخاب اولین تگ h5 در صفحه
console.log(document.querySelector('h5'));

انتخاب‌های پیشرفته و استفاده از شبه‌کلاس‌های CSS

از آنجا که querySelector یک انتخابگر تک‌عضوی است، اگر چند تگ هم‌نام داشته باشیم، فقط اولین مورد تغییر می‌کند. اما با استفاده از ویژگی‌های CSS3 می‌توان گره‌های خاص‌تری را هدف قرار داد:

// تغییر رنگ اولین آیتم از لیست (تگ li)
document.querySelector('li').style.color = 'red';

// تغییر رنگ آخرین آیتم لیست با استفاده از last-child
document.querySelector('li:last-child').style.color = 'blue';

// انتخاب و تغییر رنگ سومین آیتم لیست با استفاده از nth-child
document.querySelector('li:nth-child(3)').style.color = 'yellow';

// تغییر محتوای متنی چهارمین آیتم لیست
document.querySelector('li:nth-child(4)').textContent = 'Hello World';

نکته مهم درباره انتخابگرهای تک‌عضوی و شبه‌کلاس‌ها

اگر تلاش کنید با استفاده از nth-child(odd) یا nth-child(even) تمام آیتم‌های فرد یا زوج را انتخاب و استایل‌دهی کنید، خواهید دید که تغییرات فقط روی اولین مورد پیدا شده اعمال می‌شود:

// فقط اولین آیتم فرد پس‌زمینه خاکستری می‌گیرد، نه همه آن‌ها!
document.querySelector('li:nth-child(odd)').style.background = '#ccc';

برای اعمال تغییرات روی تمام عناصر مطابق با شرط، باید از متد querySelectorAll استفاده کنید که در ویدیوی بعدی به آن می‌پردازیم.

---

جمع‌بندی

در این بخش آموختیم که چگونه با استفاده از document.getElementById و document.querySelector به صورت مستقیم و بدون نیاز به کتابخانه‌های جانبی مانند jQuery، عناصر تکی را در درخت DOM انتخاب کرده و ویژگی‌ها، استایل‌ها و محتوای متنی آن‌ها را دستکاری کنیم. همچنین متوجه شدیم که ذخیره کردن عناصر در متغیرها (Caching) عملکرد برنامه را بهینه‌تر می‌کند.