آموزش جاوا اسکریپت - انتخاب المان‌های HTML

[mesterweb]

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

تمامی صفحات وب از کدهای اچ‌تی‌ام‌ال تشکیل شده‌اند. با کمک CSS و استایل‌های آن، این کدها ظاهر مرتب‌تر و زیباتری به خود می‌گیرند. جاوا اسکریپت نیز به شما کمک می‌کند این المان‌های زیبا را تغییر دهید. مثلا محتوای اچ‌تی‌ام‌ال‌ها را تغییر دهید، آن‌ را حذف کنید یا متنی به آن اضافه کنید و ...! در این جلسه با نحوه انتخاب المان‌های اچ‌تی‌ام‌ال آشنا خواهیم شد. 

چگونه یک المان اچ‌تی‌ام‌ال را با کمک جاواسکریپت انتخاب کنیم؟

اگر با زبان سی‌اس‌اس آشنا باشید، می‌دانید که به‌صورت کلی چند روش برای انتخاب المان‌ها وجود دارد! انتخاب بر اساس id، انتخاب بر اساس نام class یا انتخاب بر اساس نوع تگ (مثلا کل تگ‌های p یا h2 صفحه).

در جاوا اسکریپت نیز همین قانون برقرار است. یعنی شما می‌توانید المان‌های صفحه را بر اساس نام id، نام کلاس (Class) یا نوع تگ انتخاب کنید. در تمامی این حالت ما از آبجکتی به نام document کمک می‌گیریم!‌ آبجکت داکیمونت را مانند یک ظرف خیلی بزرگ در نظر بگیرید که کل اطلاعات صفحه در آن ذخیره شده است. پس وقتی می‌خواهیم به صفحه اچ‌تی‌ام‌ال در جاوا اسکریپت دسترسی داشته باشیم، می‌رویم و داخل این جعبه document را نگاه می‌کنیم و با جستجو در آن المان‌ مورد نظرمان را انتخاب (select) می‌کنیم. 

برای انتخاب المان‌های اچ‌تی‌ام‌ال از جعبه document روش‌های زیر را یاد خواهیم گرفت:

انتخاب المان بر اساس ID:

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

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

این کار توسط دستور  ()getElementById  انجام می‌شود. در این دستور (یا همان متد خودمان) ما یک پرانتز داریم که داخل این پرانتز باید دو تا  “”  بگذاریم. سپس داخل این کوتیشن‌ها نام آی‌دی المان تعریف‌شده در اچ‌تی‌ام‌ال را قرار می‌دهیم.

مثلا یک المان با ID دمو داریم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

حالا می‌خواهیم آن را توسط جاوا اسکریپت انتخاب کنیم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در این مثال ما المان HTML با آی‌دی select-by-id را انتخاب کرده‌ایم و می‌توانیم روی آن تغییر ایجاد کنیم.

انتخاب بر اساس نام تگ:
گاهی می‌خواهیم تمامی تگ‌های اچ‌تی‌ام‌ال را به‌صورت یکجا انتخاب کنیم! مثلا می‌خواهیم هر چه تگ P یا H1 در صفحه است، یکجا انتخاب کنیم و یکجا آن‌ها را تغییر دهیم. در این حالت جاوااسکریپت روش مخصوص خودش را به ما می‌دهد. این روش که با نام selectByTagName شناخته می‌شود. دستور نوشتن انتخاب بر اساس نام تگ نیز به شکل زیر است:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در این مثال ما کل المان‌های پاراگراف را که با تگ p در صفحه شناخته می‌شوند، انتخاب کرده‌ایم. دقت کنید که در اینجا ما مجموعه‌ای از المنت‌ها را با هم انتخاب می‌کنیم، پس در دستور خود کلمه Elements را به‌جای Element در دستور قبلی می‌نویسیم. 

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

گاهی می‌خواهیم همه المان‌هایی را که دارای یک کلاس مشخص هستند، انتخاب کنیم. در این حالت می‌توانیم از دستور  document.getElementsByClassName  استفاده کنیم و نام کلاس را همراه با “”  درون پرانتز بگذاریم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

بعد از انتخاب توسط جاوا اسکریپت، چه تغییراتی می‌توان روی اچ‌تی‌ام‌ال انجام داد؟
حالا فرض کنیم که یک المان را توسط جاوا اسکریپت انتخاب کنیم! این کار به چه دردمان می‌خورد؟ آن وقت می‌توانید تمامی تغییراتی که جاوا اسکریپت به شما اجازه می‌دهد روی آن المان انجام دهید. در واقع با انتخاب یک المان توسط جاوا اسکریپت، یک آبجکت (همانند یک ظرف کوچک دیگر در نظر بگیرید) از آن المنت خواهید داشت که در درون این آبجکت قابلیت‌های وجودی دارد (مثل محتوای داخل جعبه)! مثلا می‌توانید اچ‌تی‌ام‌ال این المان را تغییر دهید (محتوای داخل جعبه را انتخاب و تغییر دهید) می‌توانید آن را حذف کنید. بدان تگ جدیدی اضافه کنید! یک کلاس سی‌اس‌اس جدید بدان اضافه کنید و ...

در ادامه لیست تغییراتی را که به‌طور کلی روی المان‌های اچ‌تی‌ام‌ال بعد از انتخاب توسط جاوا اسکریپت انجام می‌دهیم، مرور می‌کنیم:

تغییر در متن:
فرض کنید می‌خواهید متن یک تگ p را بعد از کلیک روی یک دکمه تغییر دهید. نه سی‌اس‌اس نه اچ‌تی‌ام‌ال هیچکدام امکان تغییر در متن را بعد از رندر شدن توسط مرورگر نمی‌دهند؛ ولی جاوا اسکریپت این امکان را در اختیار شما قرار می‌دهد. برای تغییر متن از دستور innerHTML بعد از نام المان استفاده می‌شود.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در زیر مرحله به مرحله این کار را انجام داده‌ایم:

مرحله اول: انتخاب المان HTML  در صفحه
با توجه به نکاتی که بالاتر گفتیم‌ می‌توانیم یک المان اچ‌تی‌ام‌ال را بر اساس id یا class یا تگ آن انتخاب کنیم. برای مثال برای تغییر محتوای متن المان p با نام irani مراحل زیر را طی ‌می‌کنیم:

فایل html

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

فایل جاوا اسکریپت

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

نکته مهم: می‌توانیم المان اچ‌تی‌ام‌ال را  بعد از انتخاب در یک متغیر ذخیره کنیم. این کار چه فایده‌ای دارد؟ مهم‌ترین فایده آن است که اگر بخواهیم بعدا تغییر دیگری روی این المان اعمال کنیم مجبور نیستیم باز هم دستور  document.getElementById('irani') را بنویسیم و این کارها را تکرار کنیم! چون تمامی اطلاعات المان در یک متغیر ذخیره شده و کافی است نام متغیر را به همراه دستور دلخواه کنار آن بنویسیم!

برای مثال محتوای المان اچ‌تی‌ام‌ال با id با نام irani را در یک متغیر به نام  elem ذخیره می‌کنیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مرحله دوم: انجام تغییرات مورد نظر توسط جاوا اسکریپت
بعد از انتخاب المان توسط جاوا اسکریپت وقت آن رسیده است تا روی آن تغییرات ایجاد کنیم. گفتیم که هر المان در جاوا اسکریپت به‌صورت یک آبجکت (ظرفی که محتوای آن دستورات جاوا اسکریپتی و اطلاعات مربوط به المان) ذخیره می‌شود. برای اعمال تغییر روی این المان اچ‌تی‌ام‌ال دستور دلخواه را می‌نویسیم. مثلا برای تغییر محتوا از دستور innerHTML استفاده می‌کنیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثال‌های دیگر:

مثال اول:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثال دوم: در این مثال می‌خواهیم کمی متفاوت عمل کنیم! مثلا محتوای ذخیره‌شده در یک متغیر را روی یک المان بنویسیم. 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همانطور که دیدید، یک استرینگ را که در یک متغیر ذخیره شده است، به‌عنوان متن جدید به تگ span با آی‌دی change-me داده‌ایم.

مثال سوم: در این مثال قصد داریم کمی خلاقانه‌تر از این موضوع استفاده کنیم.

در جاوا اسکریپت دستوری به نام prompt وجود دارد. این دستور یک پنجره مشابه الرت باز می‌کند؛ با این تفاوت که کاربر می‌تواند در این پنجره متن هم تایپ کند. 
برای ساخت یک پنجره prompt، یک متغیر با نام دلخواه می‌سازیم و دستور window.prompt را به عنوان مقدار به آن می‌دهیم. در نتیجه این متغیر یک پنجره propmt ٰرا در مرورگر باز می‌کند.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همچنین دقت کنید دستور innerHTML تنها متن را تغییر نمی‌دهد! در واقع تمامی HTML را که داخل آن تگ وجود دارد تغییر می‌دهد. برای مثال اگر المان اچ‌تی‌ام‌ال شما دارای بچه‌های دیگری مثل تگ‌های‌ پاراگراف‌ یا span یا هر چیز دیگری باشد، بعد از این کار حذف و محتوای جدید جایگزین آن می‌شود!

نکته بعدی آن است که شما می‌توانید یک اچ‌تی‌ام‌ال جدید را به جای استرینگ بنویسید. مثلا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تغییر attributeهای اچ‌تی‌ام‌ال: 
یکی دیگر از مواردی که می‌توانید روی المان‌های اچ‌تی‌ام‌ال انجام دهید، تغییر attribute-های آن‌ها است. برای این کار کافی است نام attribute را بعد از المان اچ‌تی‌ام‌ال بنویسید و مقدار جدید را بدان اختصاص دهید. 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثال: برای مثال در زیر می‌خواهیم اتریبیوت src در تصویر دارای ID با نام change-me را تغییر دهیم! برای این کار به‌راحتی دستور زیر می‌نویسیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در مثال بعدی می‌خواهیم مقدار یک اینپوت متنی در اچ‌تی‌ام‌ال را در صفحه چاپ کنیم! برای این کار ابتدا باید مقدار اینپوت را توسط جاوا اسکریپت ذخیره کنیم:

HTML

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثال سوم: در سومین مثال می‌خواهیم یک دکمه را به کمک جاوا اسکریپت Disable کنیم. این کار نیز به‌سادگی هر چه تمام‌تر قابل اجرا است:

HTML

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

فایل JS

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

با تغییر اتریبیوت disabled در تگ Button و true یا false کردن آن می‌توانیم دکمه‌ها را فعال یا غیر فعال کنیم. 

نکته پایانی:
همانطور که گفتیم هر اتریبیوتی در هر المان اچ‌تی‌ام‌الی قابل دسترسی است. کافی است نام آن اتریبیوت را بنویسید تا مقدار آن را بگیرید. مثلا برای دریافت نام یک فرم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

استفاده از HTML5 Data Attributes در جاوا اسکریپت:
یکی از قابلیت‌های HTML 5 امکان اضافه کردن اتریبیوت‌های جدید به تگ‌های HTML است. مثلا فرض کنید می‌خواهید به یک المان p علاوه بر اتربیوت id و class که به‌صورت پیش‌فرض در همه المان‌های p وجود دارند یک اتریبیوت دلخواه اضافه کنید که محتوای دلخواهتان را در خودش ذخیره می‌کند. مثلا می‌خواهیم همه المان‌های p ما دارای یک متن پیش‌فرض باشند که در صورت خالی بودن متنشان، این متن در آن‌ها نمایش داده شود.

برای این کار یک راه حل این است که یک اتریبیوت Data به اچ‌تی‌ام‌ال تگمان اضافه کنیم. قاعده کلی اضافه کردن اتریبیوت به اچ‌تی‌ام‌ال به‌صورت زیر است:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

بدین ترتیب که همیشه کلمه data-  و بعد از آن‌، نام اتریبیوت دلخواهمان را می‌نویسیم. مثلا

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در این مثال ما یک تگ p با اتریبیوت دلخواه customer ساخته‌ایم. اگر کلمه اتریبیوت ما چندبخشی باشد (مانند customer name) برای جدا کردن هر کلمه از علامت - استفاده می‌کنیم و نام هر اتریبیوت را می‌نویسیم. مثلا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همچنین شما می‌توانید بی‌نهایت اتریبیوت دلخواه به المان‌های اچ‌تی‌ام‌ال خود اضافه کنید و هیچ محدودیتی در این زمینه برای شما اعمال نشده است. برای مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

وقتی بخواهیم مقدار این اتریبیوت‌ها را در جاوا اسکریپت بگیریم، چه کار باید بکنیم؟

اینجا کمی کار ما دچار تغییر می‌شود! برای این کار مراحل زیر را طی می‌کنیم:

مرحله اول: انتخاب المان بر اساس id یا هر انتخاب‌گر دیگری که یاد گرفته‌ایم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همانطور که گفتیم می‌توانیم هر المان اچ‌تی‌ام‌ال را در یک متغیر ذخیره کنیم تا هر زمان خواستیم روی آن تغییر دهیم مجبور نباشیم کدها را از نو بنویسیم. بدین ترتیب کد بالا به‌صورت زیر می‌شود:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مرحله دوم: برای دریافت مقدار custom attribute هایی که خودمان به تگ اچ‌تی‌ام‌ال اضافه کرده‌ایم از قاعده کلی زیر استفاده می‌کنیم:

elementName.dataset.attributeName

این بدین مفهوم است که ما تمامی اتریبیوت‌های جدیدمان را در یک جا به نام dataset ذخیره داریم و از داخل این آبجکت می‌توانیم هر یک را جدا‌گانه داشته باشیم. برای مثال در المنت اچ‌تی‌ام‌ال زیر خواهیم داشت:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همچنین به یاد داشته باشید در اتریبیوت‌های چنداسمی به‌جای علامت - حرف اول را بزرگ می‌نویسیم.

مثلا data-custom-name می‌شود customerName

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