از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در این بایت ما به یک عملیات رایج در جاوا اسکریپت frontend نگاه خواهیم کرد – حذف تمام عناصر با یک کلاس خاص. چنین کاری ممکن است هنگام دستکاری DOM، به خصوص هنگام کار با یک برنامه وب پویا، پیش بیاید.
انتخابگرهای DOM و کلاس
در HTML رندر شده، DOM ساختار محتوای وب را نشان می دهد. این یک نمایش شی گرا از یک وب است page، که می تواند با جاوا اسکریپت برای تغییر ساختار سند، سبک و محتوای آن دستکاری شود. انتخابگرهای کلاس نقش مهمی در خواندن و دستکاری DOM دارند.
انتخابگر کلاس نامی است که به یک عنصر HTML با استفاده از class صفت. این می تواند به ما کمک کند تا گروه های خاصی از عناصر را با جاوا اسکریپت یا CSS مورد هدف قرار داده و دستکاری کنیم. به عنوان مثال، اگر گروهی از عناصر با کلاس دارید highlight، می توانید آنها را با جاوا اسکریپت مانند زیر هدف قرار دهید:
let highlights = document.getElementsByClassName('highlight');
این یک “زنده” را برمی گرداند HTMLCollection عناصر با کلاس highlight. این “زنده” است زیرا هنگامی که سند تغییر می کند به طور خودکار به روز می شود.
چرا عناصر را با یک کلاس خاص حذف کنیم؟
سناریوهای زیادی وجود دارد که این عملیات مفید است.
شاید شما در حال ساختن یک وب پویا هستید page جایی که عناصر اغلب اضافه و حذف می شوند. به عنوان مثال، یک سیستم اطلاع رسانی ممکن است از یک کلاس خاص برای پیام های خطا استفاده کند. هنگامی که خطاها برطرف می شوند، حذف همه این پیام ها به یکباره منطقی است.
مورد استفاده دیگر می تواند یک سیستم اعتبار سنجی فرم باشد. فیلدهای فرم نامعتبر را می توان با یک کلاس خاص علامت گذاری کرد و پس از تأیید اعتبار، این نشانگرها را می توان با یک دستور حذف کرد.
حذف عناصر با کلاس خاص
اکنون، بیایید به این بپردازیم که این بایت واقعاً در مورد چیست – حذف عناصر با یک کلاس خاص. در اینجا یک تابع ساده وجود دارد که این کار را انجام می دهد:
function removeElementsByClass(className) {
let elements = document.getElementsByClassName(className);
while(elements.length > 0) {
elements(0).parentNode.removeChild(elements(0));
}
}
این تابع بدین صورت عمل می کند که ابتدا تمام عناصر با کلاس مشخص شده را انتخاب می کند. سپس وارد حلقه‌ای می‌شود که تا زمانی که عناصری با این کلاس وجود دارند، ادامه می‌یابد. در داخل حلقه، اولین عنصر مجموعه را حذف می کند.
یاد آوردن، getElementsByClassName یک مجموعه زنده را برمی گرداند، بنابراین حذف یک عنصر به طور خودکار مجموعه را به روز می کند. به همین دلیل است که همیشه می‌توانیم اولین عنصر را بدون خارج شدن از محدوده حذف کنیم.
برای استفاده از تابع، کافی است آن را با نام کلاس به عنوان پارامتر فراخوانی کنید:
removeElementsByClass('highlight');
بعد از این خط کد، تمام عناصر با کلاس highlight از سند حذف خواهد شد.
توجه داشته باشید: جالب اینجاست که حذف یک عنصر از DOM آن را به طور کامل حذف نمی کند. از ساختار سند حذف شده است، اما همچنان در حافظه وجود دارد و می تواند دوباره در سند وارد شود.
حذف عناصر بر اساس نام کلاس با jQuery
با توجه به محبوبیت آن، بسیاری از شما که این مطلب را می خوانید احتمالاً از jQuery در سایت خود نیز استفاده می کنید. البته، همانطور که خواهید دید، jQuery می تواند عملیاتی مانند این را ساده تر کند.
در اینجا روش حذف تمام عناصر بر اساس نام کلاس با استفاده از jQuery آمده است:
$('.highlight').remove();
در این مثال، می‌خواهیم تمام عناصر با کلاس «highlight» را حذف کنیم. با این حال، باید هر کلاسی را که باید حذف کنید، وارد کنید.
با مقایسه این روش با روش “جاوا اسکریپت ساده”، بسیار کوتاه تر، خواندن بسیار آسان تر و خطای بسیار کمتری است. در حالی که بسیاری ترجیح می دهند از JS ساده برای پروژه های خود استفاده کنند، نمی توان از راحتی کتابخانه ای مانند jQuery چشم پوشی کرد.
نتیجه
جاوا اسکریپت مجموعه ای قدرتمند از ابزارها را برای دستکاری DOM ارائه می دهد و درک این ابزارها می تواند توانایی شما برای ایجاد صفحات وب پویا را تا حد زیادی افزایش دهد. در این بایت روش انتخاب عناصر بر اساس نام کلاس و روش حذف آن عناصر را دیدیم. ما دیدیم که چگونه این کار را با جاوا اسکریپت ساده و همچنین با جی کوئری انجام دهیم.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-27 22:12:04
