آموزش DOM در جاوا اسکریپت
DOM مخفف Document Object Model است. زمانی که مرورگر یک صفحه وب را بارگذاری میکند، کد HTML به یک ساختار درختی تبدیل میشود که در آن هر بخش از صفحه مثل تگها، متنها و ویژگیها بهعنوان یک “شیء” (Object) در نظر گرفته میشود. این ساختار به ما این امکان را میدهد تا با استفاده از جاوا اسکریپت بتوانیم بخشهای مختلف صفحه را انتخاب کنیم، تغییر دهیم یا حتی حذف و اضافه کنیم.
به زبان ساده، DOM پلی است میان HTML و JavaScript. بدون وجود DOM، جاوا اسکریپت نمیتوانست به عناصر صفحه دسترسی داشته باشد. مثلا وقتی میخواهید متن یک پاراگراف را تغییر دهید یا روی یک دکمه کلیک کنید و یک پیام نمایش داده شود، در واقع دارید با DOM کار میکنید. اهمیت DOM در این است که به توسعهدهندگان اجازه میدهد تا صفحات وب را پویا و تعاملی کنند.
امروزه کاربران به سایتهای ساده و استاتیک علاقهای ندارند؛ بلکه انتظار دارند وقتی روی دکمهای کلیک میکنند یا در فرم چیزی مینویسند، واکنش سریعی ببینند. این قابلیتها تماما از طریق کار با DOM در جاوا اسکریپت ممکن میشود. بنابراین اگر به دنبال یادگیری برنامهنویسی فرانتاند هستید، یادگیری DOM یکی از ضروریترین مراحل مسیر شماست. در پایان هم یک کد تخفیف ویژه برای دسترسی به دورههای آموزشی ما دریافت خواهید کرد تا مسیر یادگیریتان را سریعتر پیش ببرید.
مزایای DOM در جاوا اسکریپت
زبانهای برنامهنویسی سطح پایین مانند Assembly و زبان ماشین، مستقیماً با سختافزار در ارتباط هستند. این زبانها به برنامهنویس اجازه میدهند تا کنترل کاملی روی حافظه، پردازنده و ساختار داخلی سیستم داشته باشد. اگرچه یادگیری آنها دشوارتر از زبانهای سطح بالا است، اما در پروژههایی که نیاز به بهینهسازی شدید و سرعت بالا دارند، بسیار ارزشمند هستند.
به عنوان مثال، در توسعه سیستمعاملها، درایورها و نرمافزارهایی که باید با سختافزار تعامل مستقیم داشته باشند، از این زبانها استفاده میشود. یکی از مزایای اصلی زبانهای سطح پایین این است که برنامهنویس میتواند بدون واسطه با CPU و حافظه کار کند. همین موضوع باعث میشود عملکرد نرمافزار بسیار سریع و سبک باشد.
در دنیای امروز، با وجود اینکه زبانهای سطح بالا محبوبتر هستند، هنوز هم زبانهای سطح پایین جایگاه مهمی دارند. به خصوص در حوزههای برنامهنویسی سیستم، امنیت سایبری و توسعه کرنل سیستمعامل، بدون این زبانها کار عملاً غیرممکن است. اگرچه ورود به این حوزه برای مبتدیان دشوار است، اما یادگیری مفاهیم اولیه میتواند دید عمیقتری نسبت به معماری کامپیوتر و ساختار زبانهای سطح بالا به شما بدهد.
تفاوت سند معمولی HTML با سند شیگرای DOM
وقتی به کد HTML نگاه میکنیم، آن را به صورت یک متن ساده میبینیم که شامل تگها، متنها و ویژگیهاست. این سند HTML صرفاً یک فایل متنی است که ساختار محتوای وبسایت را مشخص میکند. اما مرورگرها برای اینکه بتوانند با این کدها کار کنند، آن را به یک مدل شیگرای درختی به نام DOM تبدیل میکنند. اینجا است که تفاوت اصلی نمایان میشود.
در سند HTML همه چیز ثابت و ایستا است. یعنی اگر تغییری بخواهیم بدهیم، باید فایل HTML را ویرایش کنیم و دوباره بارگذاری کنیم. اما در سند DOM هر بخش از کد HTML به یک شیء (Object) تبدیل میشود که جاوا اسکریپت میتواند به آن دسترسی داشته باشد. این موضوع به ما اجازه میدهد که حتی بعد از بارگذاری صفحه، بخشهای مختلف آن را تغییر دهیم یا ویژگیهای جدیدی به آن اضافه کنیم.
به عنوان مثال اگر در HTML یک <h1> نوشته شده باشد، در DOM آن به صورت یک گره (Node) از نوع عنصر درختی وجود دارد که متدها و ویژگیهای مختلفی را در اختیار ما میگذارد. بنابراین تفاوت کلیدی این است که HTML فقط ساختار اولیه صفحه است، اما DOM یک مدل شیگرا از آن ساختار است که امکان تعامل و تغییر را فراهم میکند.
روشهای انتخاب عناصر در DOM
برای اینکه بتوانیم با عناصر یک صفحه کار کنیم، ابتدا باید آنها را انتخاب کنیم. جاوا اسکریپت چند روش مختلف برای انتخاب عناصر DOM ارائه داده است که هر کدام کاربردهای خاص خود را دارند.
یکی از رایجترین روشها استفاده از getElementById است. این متد همانطور که از نامش پیداست، یک عنصر را بر اساس id مشخص میکند. به عنوان مثال اگر یک <div> با id برابر “box” داشته باشیم، میتوانیم آن را با کد زیر انتخاب کنیم:
let box = document.getElementById(“box”);
روش دیگر استفاده از getElementsByClassName است که تمامی عناصری که دارای یک کلاس مشخص هستند را انتخاب میکند. این متد یک مجموعه (HTMLCollection) برمیگرداند، بنابراین اگر چند عنصر با همان کلاس وجود داشته باشند باید روی آنها حلقه بزنیم.
اما یکی از پرکاربردترین و مدرنترین روشها querySelector و querySelectorAll هستند. این متدها به شما امکان میدهند تا عناصر را دقیقاً مانند CSS انتخاب کنید. برای مثال:
let title = document.querySelector(“.main-title”);
let allItems = document.querySelectorAll(“li”);
این روش بسیار انعطافپذیر است و تقریباً در تمام پروژهها استفاده میشود. اگر بخواهید روی یک لیست طولانی کار کنید یا عناصر خاصی را تغییر دهید، این روش بهترین انتخاب خواهد بود.
تغییر محتوای عناصر DOM
بعد از اینکه توانستیم یک عنصر را انتخاب کنیم، مرحله بعدی تغییر محتوای آن است. در جاوا اسکریپت برای تغییر متن یا HTML داخلی عناصر DOM از ویژگیهایی مثل innerText و innerHTML استفاده میکنیم.
به عنوان مثال فرض کنید یک <p> در صفحه داریم:
<p id=”message”>سلام دنیا</p>
اگر بخواهیم متن آن را تغییر دهیم، میتوانیم بنویسیم:
document.getElementById(“message”).innerText = “سلام به همه کاربران!”;
این کد متن پاراگراف را تغییر میدهد. حالا اگر بخواهیم علاوه بر متن، کد HTML هم داخل آن قرار دهیم، از innerHTML استفاده میکنیم:
document.getElementById(“message”).innerHTML = “<strong>خوش آمدید!</strong>”;
در کنار تغییر متن، میتوانیم ویژگیها (attributes) را نیز تغییر دهیم. برای مثال تغییر مقدار src یک تصویر یا تغییر رنگ پسزمینه یک بخش از صفحه. این کارها با متدهایی مثل setAttribute یا مستقیماً از طریق ویژگیهای عنصر انجام میشود.
توانایی تغییر عناصر DOM باعث میشود سایتها پویا و جذاب باشند. مثلا در یک فروشگاه اینترنتی وقتی روی دکمه “افزودن به سبد خرید” کلیک میکنید و تعداد کالا تغییر میکند، در واقع پشت صحنه همین تغییرات DOM اتفاق میافتد.
مدیریت رویدادها در DOM
یکی دیگر از بخشهای مهم آموزش DOM در جاوا اسکریپت، مدیریت رویدادها (Events) است. رویدادها همان اتفاقاتی هستند که در صفحه رخ میدهند؛ مثل کلیک کردن روی یک دکمه، حرکت موس، یا پر کردن یک فرم. برای اینکه سایت ما به این رویدادها واکنش نشان دهد، باید با مفهوم event handling آشنا شویم.سادهترین روش افزودن رویداد، استفاده از ویژگیهای HTML مثل onclick است. اما روش حرفهایتر استفاده از متد addEventListener در جاوا اسکریپت است. به عنوان مثال:
let button = document.getElementById(“btn”);
button.addEventListener(“click”, function() { alert(“دکمه کلیک شد!”); });
این کد باعث میشود هر وقت کاربر روی دکمه کلیک کرد، یک پیام نمایش داده شود. مزیت addEventListener این است که میتوانیم چندین رویداد مختلف به یک عنصر اضافه کنیم و کدها هم تمیزتر و قابل نگهداریتر خواهند بود.
رویدادها محدود به کلیک نیستند. میتوانیم روی رویدادهایی مثل mouseover، keydown، submit و حتی سفارشی (Custom Events) کار کنیم. با این روش میتوانیم تعامل واقعی میان کاربر و سایت ایجاد کنیم.
مدیریت درست رویدادها، کیفیت تجربه کاربری (UX) را بالا میبرد. به همین دلیل است که یادگیری این بخش از DOM اهمیت بسیار زیادی دارد. هر جا که تعامل کاربر با صفحه وجود دارد، حتما پای رویدادها در میان است.
نمونههای کاربردی کار با DOM در جاوا اسکریپت
تا اینجا بیشتر با مباحث تئوری کار با DOM آشنا شدیم، اما شاید برای شما این سؤال پیش بیاید که در عمل چه کارهایی میتوان با DOM انجام داد. حقیقت این است که تقریباً تمام تعاملاتی که در یک سایت مدرن میبینید، به نوعی با DOM در جاوا اسکریپت در ارتباط هستند.
یکی از رایجترین مثالها، ساخت منوهای کشویی (Dropdown Menu) است. وقتی کاربر روی یک دکمه کلیک میکند و لیستی باز یا بسته میشود، این عمل با تغییر ویژگیهای CSS از طریق DOM انجام میگیرد.
مثال دیگر اعتبارسنجی فرمها (Form Validation) است. وقتی کاربر فرم ثبتنام را پر میکند، جاوا اسکریپت از طریق دسترسی به مقادیر ورودیها (input) در DOM بررسی میکند که آیا همه فیلدها پر شدهاند یا خیر. در صورت وجود خطا، میتوانیم یک پیام هشدار یا متن راهنما به کاربر نمایش دهیم.
در طراحی فروشگاههای اینترنتی نیز DOM نقش بزرگی دارد. فرض کنید کاربر روی دکمه “افزودن به سبد خرید” کلیک کند. بلافاصله تعداد محصولات در آیکون سبد خرید تغییر میکند، بدون اینکه کل صفحه دوباره بارگذاری شود. این نمونه بارز استفاده از متدهای DOM برای تغییر محتوای صفحه به صورت زنده است.
بهطور کلی هر زمان بخواهید صفحه وب شما تعاملپذیر و داینامیک باشد، پای DOM در میان است. تمرین روی این مثالها بهترین راه برای تسلط بیشتر بر مفاهیم DOM و افزایش مهارت در جاوا اسکریپت است.
سخن پایانی درباره DOM
در این مقاله تلاش کردیم بهصورت کامل و قدمبهقدم مفهوم DOM در جاوا اسکریپت را توضیح دهیم. از تعریف اولیه DOM و تفاوت آن با HTML، تا روشهای انتخاب عناصر، تغییر محتوا، مدیریت رویدادها و حتی نمونههای کاربردی—all به این دلیل بیان شد که درک عمیقتری از نقش DOM در توسعه وب پیدا کنید. اگر بهدنبال حرفهای شدن در برنامهنویسی فرانتاند هستید، بدون شک تسلط بر DOM یکی از مهمترین مهارتها برای شما خواهد بود.
فراموش نکنید که یادگیری این مفاهیم فقط با خواندن به نتیجه نمیرسد. بهترین راه این است که مرتباً تمرین کنید، مثالها را در پروژههای کوچک پیادهسازی کنید و به مرور سطح خود را ارتقا دهید. در دنیای وب، تمرین و تجربه عملی ارزشمندتر از هر چیز دیگری است.
اگر دوست دارید این مسیر یادگیری را سریعتر و حرفهایتر پیش ببرید، میتوانید از دورههای آموزشی ما استفاده کنید. برای همراهی شما عزیزان، یک کد تخفیف ویژه نیز در نظر گرفتهایم که هنگام ثبتنام قابل استفاده است:
کد تخفیف: codekimia1
با استفاده از این کد میتوانید دورهها را با 10 درصد تخفیف تهیه کنید و قدمهای بزرگی در مسیر یادگیری جاوا اسکریپت و DOM بردارید.
