وقتی صحبت از برنامه نویسی می شود، ترساندن بسیار آسان است. از این گذشته، شروع هر کاری بدون دانش قبلی کاملاً ترسناک است. نگران نباشید، پس از این پست، اطلاعاتی در مورد آنچه برای برنامه نویس شدن لازم است خواهید داشت.
ما چه کار می کنیم؟
قبل از اینکه وارد هر کدنویسی واقعی شویم، مهم است که بدانیم چه کاری انجام خواهیم داد. کاری که ما امروز انجام خواهیم داد، دستکاری مدل شیء سند (DOM) یک وب سایت ویکی پدیا است. DOM دقیقا چیست؟ DOM داده ای است که روی صفحه نمایش شما ارائه می شود. در همین ثانیه، DOM این وب سایت، پست وبلاگ من را نشان می دهد که همان چیزی است که شما می خوانید. وقتی می‌گویم ما قرار است DOM را دستکاری کنیم، منظورم این است که داده‌هایی را که در وب‌سایت نمایش داده می‌شود تغییر می‌دهیم.
باز کردن ابزارهای توسعه دهنده
اکنون که متوجه شده ایم که قرار است چه کاری انجام دهیم، ادامه دهید و یک وب سایت ویکی پدیا در گوگل کروم از شخصیت تاریخی مورد علاقه خود باز کنید. پس از بارگذاری سایت، در هر نقطه از صفحه کلیک راست کرده و بر روی دکمه “Inspect” کلیک کنید. پس از کلیک کردن، باید به Developer Tools در سمت راست صفحه دسترسی داشته باشید. همانطور که روی خطوط مختلف کد حرکت می‌کنید، می‌توانید قسمت‌های مختلف صفحه را که برجسته می‌شوند، ببینید. همانطور که ممکن است فرض کنید، خط کدی که ماوس را روی آن قرار می دهید با قسمت برجسته صفحه مرتبط است. ادامه دهید و خط کدی را پیدا کنید که محتوای اصلی صفحه را برجسته می کند. چیزی شبیه به این خواهد بود:
یافتن عنصر هدر
هنگامی که خط کد را پیدا کردید، مثلث سمت چپ آن خط را فشار دهید. با این کار کد را جمع می‌کند تا کد زیربنایی نمایان شود. یک خط دیگر از کد ظاهر می شود، ادامه دهید و کد زیرین را در آن خط نیز جمع کنید. به تکرار روند یافتن خط کدی که عنوان را برجسته می کند، ادامه دهید تا زمانی که دیگر خطوط کد قابل جمع شدنی وجود نداشته باشد. در مثالی که ارائه کردم، این کار را تا زمانی که ببینم «آبراهام لینکلن» برجسته شده است، ادامه می‌دهم. خط کد صفحه آبراهام لینکلن من به شکل زیر است:
<span class="mw-page-title-main">Abraham Lincoln</span>
خط کد شما به غیر از نام کلاس و متفاوت بودن محتوای متن باید بسیار شبیه به آن باشد. اکنون که می دانیم چه خط کدی مسئول ایجاد عنوان ما است، می توانیم به جنبه دستکاری این فرآیند برسیم.
دستکاری DOM
حالا که عنصری را داریم که می‌خواهیم دستکاری کنیم، می‌توانیم جلو برویم و وارد کنسول شویم. در بالای ابزارهای توسعه دهنده، باید گزینه ای وجود داشته باشد که عبارت “کنسول” را نشان دهد. پس از کلیک کردن، می توانیم از جاوا اسکریپت برای تغییر هدر این صفحه استفاده کنیم. در کنسول، برای وب سایتی که از آن استفاده می کنم، این خط کد را تایپ می کنیم:
const header = document.getElementsByClassName('mw-page-title-main')
آنچه این خط می گوید این است که ما در سند به دنبال عناصری با کلاس “mw-page-title-main” و ذخیره آن در متغیری به نام “header” هستیم. در وب سایت شما، نام کلاس با من متفاوت است. هر نام کلاس در خط کد span شما باشد، ادامه دهید و آن را در اینجا تایپ کنید.
راه های مختلفی برای بازیابی این عنصر وجود دارد که در ادامه به طور خلاصه به آنها خواهم پرداخت. در حال حاضر، این ساده ترین راه برای انجام این کار است. توجه کنید که چگونه خط “getElements” را بیان می کند. این نشان می دهد که بیش از یک عنصر انتخاب خواهد شد. متغیر “header” با هر عنصری در سند که این نام کلاس خاص را دارد ذخیره می شود. با حرکت به جلو، این کد را در کنسول می نویسیم:
header[0].textContent = "I'm a Programmer!"
اکنون به یاد داشته باشید که متغیر هدر با هر عنصر در سند با نام کلاس “mw-page-title-main” ذخیره می شود. ما فقط عنصر اول را در این لیست می خواهیم، به همین دلیل است که 0 را در پرانتز قرار می دهیم. سپس محتوای متن آن را با “من یک برنامه نویس هستم!” تغییر می دهیم. پس از اجرای این کد، باید “I’m a Programmer!” به عنوان عنوان صفحه می توانید ادامه دهید و محتوای متن آن را با هر چیزی که دوست دارید تغییر دهید.
تبریک می گویم!
تبریک، شما اکنون یک برنامه نویس هستید. شما رسما DOM را با استفاده از جاوا اسکریپت دستکاری کرده اید. همانطور که قبلا ذکر شد، راه های مختلفی برای بازیابی عناصر از DOM وجود دارد. جاوا اسکریپت 6 روش مختلف را برای بازیابی عناصر از DOM در اختیار ما قرار می دهد. این روش ها عبارتند از:
- getElementsByClassName (همونی که استفاده کردیم)
- getElementsByName
- getElementsByTagName
- getElementById
- querySelector
- querySelectorAll
با استفاده از این 6 روش مختلف، می‌توانیم هر عنصر خاص یا محدوده‌ای را که می‌خواهیم از DOM بازیابی کنیم. من ادامه می دهم و آن را برای یک پست وبلاگ دیگر ذخیره می کنم. با خیال راحت هر گونه تحقیقی را انجام دهید تا خودتان از این روش های مختلف استفاده کنید. با این حال، اکنون که اصل کلی آن را می‌دانید: چگونه یک عنصر خاص را از DOM بگیرید، آن را در یک متغیر ذخیره کنید و محتوای آن را تغییر دهید، ادامه دهید و سعی کنید هر چیز کوچکی را که می‌خواهید در هر وب‌سایتی تغییر دهید. تبریک می گویم، شما می دانید که برای برنامه نویس شدن چه چیزی لازم است. از تغییر هر وب سایتی که با آن برخورد می کنید لذت ببرید!
