آشنایی با سلکتورهای جاوااسکریپت برای پیدا کردن عناصر HTML

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

هر یک از روش‌های مختلف مثل getElementById() یا getElementsByClassName() و غیره، مزایا و معایبی دارد و در نتیجه برای انتخاب عناصر DOM بهتر است اطلاعات مقدماتی داشته باشیم و از بهترین سلکتور استفاده کنیم. چیزی که موضوع اصلی این مقاله است. با ما باشید.

یک صفحه‌ی وب که پر از المان‌های مختلف است را می‌توان با استفاده از کدهای جاوااسکریپت به کلی متحول کرد و تغییر داد و حتی مواردی را از آن حذف کرد و مواردی را به آن اضافه کرد. برای تغییر دادن المان‌ها، اولین مرحله این است که آنها را در DOM پیدا کنیم و سپس تغییرات را تعریف کنیم. البته می‌توانید از دستورات شرطی هم استفاده کنید و تغییرات را در زمان و شرایط خاصی انجام دهید.

مسأله‌ی انتخاب المان‌ها پاسخ‌های زیادی دارد. ممکن است با چند دستور مختلف به المان موردنظر برسید. به این دستورات Selector‌ گفته می‌شود و بسته به هدف برنامه‌نویس وب، بهتر است از برخی استفاده شود تا کدهای جاوااسکریپت ساده‌تر و کوتاه‌تر شود.

در ادامه به معرفی چند سلکتور اصلی و پرکاربرد در جاواسکریپت می‌پردازیم و با مزایای هر یک آشنا می‌شویم.

document.getElementById() برای پیدا کردن المانی با شناسه یا آی‌دی خاص

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

به عنوان مثال اگر ستون کناری سایت شما دارای شناسه‌ای به اسم sidebar باشد، برای پیدا کردن آن و در واقع تعریف کردن Node مربوطه برای کارهای بعدی، می‌توانید از دستور زیر استفاده کنید و آن را در یک متغیر به اسم side ذخیره کنید:

var side = document.getElementById('sidebar');

همان‌طور که مشاهده می‌کنید در دستور فوق شناسه‌ی المان بدون علامت # و بین کوتیشن‌ها ذکر شده است.

اگر document.getElementById المانی با شناسه‌ی مشخص شده را پیدا نکند، مقداری که برمی‌گردد null است.

document.getElementsByTagName() برای یافتن المان‌هایی با تگ خاص

برای پیدا کردن عناصری از صفحه که با یک تگ خاص HTML مثل a و div و غیره تعریف شده‌اند می‌توانید از سکلتور document.getElementsByTagName() استفاده کنید که البته آرایه‌ای از نودها را در اختیار شما قرار می‌دهد چرا که در صفحه‌ی وب ممکن است ده‌ها تگ مشابه وجود داشته باشد. به همین علت است که در این دستور، Elements به معنی عناصر ذکر شده و نه Element‌ بدون s جمع و به معنی عنصر.

توجه کنید که آرایه‌ای از نودها مثل آرایه‌های معمولی شامل عدد و حروف نیست بلکه به آن کالکشن HTML گفته می‌شود و کاربری آن نیز متفاوت است.

به عنوان مثال برای پیدا کردن تمام لینک‌های موجود در صفحه‌ای از سایت، از دستور زیر استفاده کنید تا آرایه‌ی نودها در متغیری به اسم links قرار بگیرد و سپس با دستور دوم می‌توانید به اولین لینکی که در صفحه پیدا شده، کلاسی اضافه کنید:

var links = document.getElementsByTagName('a');
links[0].classList.add("first-link");

دقت کنید که برای کار با المان‌های آرایه، باید اندیس آن را در براکت قرار بدهید که از عدد ۰ شروع می‌شود و همین‌طور دقت کنید که ترتیب المان‌ها در صفحه، متناسب با ظاهر صفحه نیست. به عنوان مثال ممکن است اولین لینکی که در HTML ذکر شده، در انتهای صفحه‌ی وب دیده شود چرا که کلاس و استایل آن به این صورت تعریف شده است.

document.getElementsByClassName() برای کار روی المان‌هایی با کلاس دلخواه

برای پیدا کردن عناصری از صفحه که دارای یکی از چند کلاس خاص هستند، می‌توانید از دستور document.getElementsByClassName() استفاده کنید. این سلکتور هم آرایه‌ی نودها را برمی‌گرداند. می‌توانید یک کلاس یا چند کلاس را با فاصله مشخص کنید.

به عنوان مثال برای یافتن المان‌هایی که دارای یکی از کلاس‌های Class1 و Class2 هستند، می‌توانید از دستور زیر استفاده کنید:

document.getElementsByClassName("Class1 Class2");

document.querySelector() برای یافتن اولین المان با کلاس، تگ یا شناسه خاص

اگر بخواهید یک جست‌وجوی کلی انجام بدهید و اولین عنصر از صفحه‌ی HTML که دارای کلاس یا شناسه یا تگ مشخصی است را انتخاب کنید، سلکتور document.querySelector() بهترین انتخاب است. این دستور اولویتی برای داشتن کلاس یا تگ یا شناسه قائل نمی‌شود و اولین عنصری که از هر نظر تطبیق داشته باشد را پیدا می‌کند.

به عنوان مثال اگر بخواهید اولین عنصر صفحه‌ی وب که شناسه‌ای به اسم link دارد را انتخاب کنید، می‌توانید از دستور زیر استفاده کنید:

document.querySelector("#link");

و اگر بخواهید اگر لینکی در صفحه قبل از المانی با آی‌دی link وجود داشت، آن المان را دستکاری کنید و در غیر اینصورت المانی با شناسه‌ی link را دستکاری کنید، می‌بایست هر دو حالت را جست‌وجو کنید:

document.querySelector("a,#link");

همان‌طور که در مثال فوق مشخص است، در سکلتور document.querySelector() قبل از ذکر کلاس‌ها، باید از نقطه استفاده شود، قبل از تگ‌ها چیزی درج نمی‌شود و قبل از شناسه‌ها باید # درج شود. بین مواردی که سرچ می‌شود نیز ویرگول قرار می‌گیرد.

document.querySelectorAll() برای یافتن لیست المان‌هایی با Class یا Tag یا id دلخواه

اگر بخواهید تمام المان‌هایی که در صفحه‌ی وب وجود دارد و دارای کلاس، تگ یا شناسه‌ی خاصی است را در یک آرایه‌ی نود داشته باشید، بهترین دستور، سکلتور document.querySelectorAll() است. در این دستور هم مثل دستور قبلی باید قبل از کلاس‌ها یا شناسه‌ها، از نقطه و # استفاده کنید.

document.querySelector(".class,a,#link");

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

var array =  document.querySelector(".class,a,#link");
array.forEach(function(name) {
    //some code;
});

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

سیاره‌ی ‌آی‌تی