فصل هشتم: کنترل کامل ظاهر سایت (DOM)

DOM

فصل هشتم: کنترل کامل ظاهر سایت (DOM)

جاوااسکریپت را به HTML متصل کنید!

۱. مفهوم DOM به زبان ساده

وقتی مرورگر یک صفحه HTML را باز می‌کند، یک مدل درختی از آن می‌سازد که به آن DOM (Document Object Model) می‌گویند. در این مدل، هر تگ (مثل h1 یا p) یک “گره” یا Node در درخت است که جاوااسکریپت می‌تواند آن را پیدا کند، حذف کند یا تغییر دهد.

قدرت DOM: با DOM شما می‌توانید بدون رفرش شدن صفحه، متن یک تیتر را عوض کنید، یک عکس جدید اضافه کنید یا رنگ پس‌زمینه سایت را با کلیک دکمه تغییر دهید.

۲. انتخاب عناصر (Selecting Elements)

برای اینکه روی یک تگ تغییری ایجاد کنیم، اول باید آن را “صدا” بزنیم. رایج‌ترین روش‌ها این موارد هستند:

// انتخاب بر اساس ID
const myTitle = document.getElementById(“main-header”);

// انتخاب پیشرفته با استفاده از سلکتورهای CSS
const myButton = document.querySelector(“.btn-submit”);

۳. ایجاد تغییرات لحظه‌ای

بعد از انتخاب تگ، می‌توانیم هر بلایی سر آن بیاوریم! متن آن را عوض کنیم یا رنگش را تغییر دهیم:

// تغییر متن
myTitle.innerText = “به CSLearn خوش آمدید”;

// تغییر استایل CSS
myTitle.style.color = “blue”;
myTitle.style.fontSize = “30px”;

۴. گوش دادن به کاربر (Event Listeners)

سایت زمانی زنده می‌شود که به کلیک‌ها یا تایپ کردن کاربر واکنش نشان دهد. برای این کار از addEventListener استفاده می‌کنیم:

myButton.addEventListener(“click”, function() {
  alert(“دکمه کلیک شد!”);
});

🛠 چالش عملی: دکمه تغییر تم

فرض کنید می‌خواهید دکمه‌ای بسازید که با کلیک روی آن، رنگ پس‌زمینه کل صفحه تغییر کند.

۱. در HTML یک دکمه با id="theme-btn" بسازید.

۲. در جاوااسکریپت آن را انتخاب کنید.

۳. یک Event Listener برای کلیک بنویسید که document.body.style.backgroundColor را به “gray” تغییر دهد.

مشاهده پاسخ چالش
const btn = document.getElementById(“theme-btn”);
btn.addEventListener(“click”, () => {
  document.body.style.backgroundColor = “#333”;
  document.body.style.color = “white”;
});

تبریک! شما به کدهای خود جان بخشیدید.

حالا شما دیگر یک برنامه‌نویس تئوری نیستید؛ شما می‌توانید ظاهر وب را تغییر دهید.

در فصل نهم (فصل آخر مقدماتی)، یاد می‌گیریم چطور با پروژه‌های کوچک تمام این دانش را ترکیب کنیم!

CSLearn.ir – همراه شما در مسیر خلاقیت

درس قبلی
بازگشت به دوره
درس بعدی