معرفی Selectors API

روشی مدرن برای انتخاب عناصر

در درس‌های گذشته با متدهای کلاسیک انتخاب عنصر مانند getElementById() و getElementsByTagName() آشنا شدیم. این متدها کاربردی هستند، اما برای انتخاب‌های پیچیده‌تر (مثلاً "تمام لینک‌های داخل پاراگراف‌هایی که کلاس highlight دارند") می‌توانند بسیار دست‌وپاگیر باشند. برای حل این مشکل، Selectors API به DOM اضافه شد که به ما اجازه می‌دهد عناصر را با استفاده از همان سلکتورهای قدرتمند و آشنای CSS انتخاب کنیم. این API شامل دو متد اصلی است: querySelector() و querySelectorAll().

انتخاب اولین عنصر با querySelector

متد querySelector() یک رشته حاوی سلکتور CSS را به عنوان آرگومان دریافت کرده و اولین عنصری که با آن سلکتور مطابقت دارد را برمی‌گرداند. اگر هیچ عنصری پیدا نشود، مقدار `null` را برمی‌گرداند. قدرت این متد در انعطاف‌پذیری آن است؛ شما می‌توانید از هر سلکتور معتبر CSS، از ساده‌ترین تا پیچیده‌ترین آن‌ها، استفاده کنید.

JAVASCRIPT

// Find an element by its ID
const header = document.querySelector('#main-header');

// Find the first paragraph with the class 'highlight'
const firstHighlight = document.querySelector('p.highlight');

// Find a link inside a list item within a nav element
const link = document.querySelector('nav ul li a');

همانطور که در مثال‌های بالا می‌بینید، می‌توانیم با همان سادگی که در CSS عناصر را هدف قرار می‌دهیم، در جاوااسکریپت نیز آن‌ها را پیدا کنیم. این متد کار انتخاب عناصر خاص در ساختارهای تو در تو را بسیار آسان می‌کند.

انتخاب تمام عناصر با querySelectorAll

متد querySelectorAll() نیز یک سلکتور CSS را به عنوان آرگومان می‌گیرد، اما به جای برگرداندن اولین عنصر، یک NodeList شامل تمام عناصری که با سلکتور مطابقت دارند را برمی‌گرداند. اگر هیچ عنصری پیدا نشود، یک NodeList خالی برگردانده می‌شود.

یک تفاوت مهم: NodeList که توسط querySelectorAll() برگردانده می‌شود، "ایستا" (static) است. این یعنی اگر پس از اجرای این متد، عنصری به DOM اضافه یا از آن حذف شود که با سلکتور مطابقت داشته باشد، این NodeList به صورت خودکار به‌روزرسانی نمی‌شود. این رفتار برخلاف HTMLCollection "زنده" (live) است که توسط getElementsByTagName() برگردانده می‌شود.

JAVASCRIPT

// Get all list items inside the element with id 'my-list'
const items = document.querySelectorAll('#my-list li');

// Loop through the NodeList and do something with each item
items.forEach(item => {
    item.style.color = 'blue';
});

console.log(items.length); // Prints the number of items found

در این کد، تمام عناصر <li> داخل یک والد مشخص را انتخاب کرده‌ایم. NodeList حاصل، متدهای مدرنی مانند forEach() را پشتیبانی می‌کند که به ما اجازه می‌دهد به راحتی روی تمام عناصر انتخابی حلقه بزنیم و عملیاتی را روی آن‌ها انجام دهیم.

جستجو در محدوده یک عنصر

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

JAVASCRIPT

const mainArticle = document.querySelector('article.main-content');

// Find the first H2 ONLY within that specific article
const articleTitle = mainArticle.querySelector('h2');

// Find all links ONLY within that article
const articleLinks = mainArticle.querySelectorAll('a');

console.log(articleTitle.textContent);
console.log(articleLinks.length);

در این مثال، ابتدا عنصر article اصلی را پیدا می‌کنیم. سپس، جستجوهای بعدی برای عنوان و لینک‌ها را به جای کل document، روی متغیر mainArticle اجرا می‌کنیم تا مطمئن شویم فقط عناصر داخل آن article انتخاب می‌شوند.

با یادگیری Selectors API، ابزارهای ما برای یافتن هر عنصری در صفحه کامل شد. متدهای querySelector() و querySelectorAll() به دلیل قدرت، انعطاف‌پذیری و شباهت به سینتکس CSS، امروزه به روش استاندارد برای انتخاب عناصر در جاوااسکریپت مدرن تبدیل شده‌اند. در درس پایانی این فصل، به چند موضوع تکمیلی و مهم دیگر در کار با DOM خواهیم پرداخت تا دانش خود را در این زمینه تکمیل کنیم.