آموزش جاوا اسکریپت – انتخابگرهای DOM در جاوا اسکریپت

آموزش جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با انتخابگرهای DOM در جاوا اسکریپت آشنا کنیم.

 

انتخاب المان DOM در جاوا اسکریپت

جاوا اسکریپت معمولا بیشتر برای دسترسی یا ویرایش محتوا یا مقدار المان های HTML در صفحه وب مثل اعمال افکت هایی مانند نمایش, مخفی, انیمیشن ها و … استفاده می شود اما قبل از انجام هر گونه عملی نیاز است که المان مدنظر را پیدا یا انتخاب کنیم.

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

 

انتخاب بالاترین المان ها

بالاترین المان های سند HTML مستقیما به عنوان خصوصیت document قابل دسترس هستند. برای مثال, المان <html> می توانید با خصوصیت document.documentElement که مثلا برای المان <head> بصورت document.head و برای <body> نیز document.body است.

اما, دقت کنید, اگر document.body قبل از تگ <body> (داخل <head>) استفاده شود مقدار null را به جای المان body برگشت می دهد چرا که در آنجایی که اسکریپت اجرا شده, تگ <body> توسط مفسر مرورگر خوانده نشده و باید سعی کنید بعد از تگ <body> از اسکریپت استفاده کنید.

برای درک بهتر نگاهی به مثال زیر بیاندازید.

 

انتخاب المان با ID

شما می توانید یک المان را بر اساس آی دی یکتا توسط متد getElementById() انتخاب کنید که یکی از انتخابگرهای DOM در جاوا اسکریپت می باشد و آسان ترین راه برای پیدا کردن یک المان HTML در درخت DOM است.

مثال زیر یک المان با خصوصیت id=”mark” را انتخاب و هایلایت می کند.

متد getElementById() المان را به عنوان یک آبجکت برگشت می دهد اگر پیدا شود یا در صورت پیدا نشدن مقدار null را برگشت می دهد.

نکته: هر المان HTML می تواند خصوصیت id داشته باشد. مقدار این خصوصیت در صفحه یکتا است و دو المان نباید یک آی دی یکسان داشته باشد.

 

انتخاب المان با نام کلاس

مشابه بالا یکی دیگر از انتخابگرهای DOM در جاوا اسکریپت متد getElementsByClassName() برای انتخاب المان هایی با نام کلاس مشخص است.

این متد یک آبجکت آرایه ای مانند از همه المان های فرزندی که نام کلاس مشخص شده را دارند, برگشت می دهد.

 

انتخاب المان با نام تگ

شما می توانید به سادگی المان های HTML را با نام تگ توسط متد getElementsByTagName() انتخاب کنید.

این متد یکی از انتخابگرهای DOM در جاوا اسکریپت است که همانند انتخاب گر قبلی یک آبجکت آرایه ای مانند از همه المان های فرزندی که نام تگ مشخص شده را دارند, برگشت می دهد.

 

انتخاب المان ها با سلکتور CSS

می توانید از متد querySelectorAll() برای انتخاب المان هایی که با سلکتور CSS مشخص شده تطابق دارند استفاده کنید.

این سلکتورهای CSS راهی بسیار قدرتمند و کارا برای انتخاب المان های سند HTML ارایه می دهند.

این متد یک لیست از همه المان هایی که در سلکتور مشخص شده است را برگشت می دهد. شما می توانید به آنها همانند آرایه ها دسترسی داشته باشید.

نکته: متد querySelectorAll() همچنین سودو کلاس های CSS مثل :first-child, :last-child, :hover, غیره را پشتیبانی می کند اما برای سودو المان هایی مثل ::before, ::after, ::first-line و غیره همیشه مقدار لیست خالی را برگشت می دهد.

 

امیدوارم  از آموزش انتخابگرهای DOM در جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی