کار با HTML (DOM) و رویدادها 🤖🖱️

وقتشه سایت رو از حالت موزه در بیاریم و بهش زندگی ببخشیم!

DOM چیه دیگه؟

DOM مخفف Document Object Model هست. وقتی مرورگر یه صفحه HTML رو باز می‌کنه، یه مدل درختی از همه تگ‌ها می‌سازه. جاوااسکریپت با استفاده از DOM می‌تونه به هر تیکه از صفحه HTML دسترسی پیدا کنه، تغییرش بده، حذفش کنه یا حتی یه چیز جدید بهش اضافه کنه!

پیدا کردن تگ‌ها

// پیدا کردن یه تگ با ID منحصر به فردش
const pageTitle = document.getElementById('main-title');

// یه روش خفن‌تر که باهاش می‌شه هر سلکتور CSS رو پیدا کرد
const firstButton = document.querySelector('.btn'); // فقط اولین مورد
const allButtons = document.querySelectorAll('.btn'); // همه موارد

دستکاری DOM و گوش دادن به رویدادها

حالا که می‌تونیم عناصر رو پیدا کنیم، می‌تونیم تغییرشون بدیم و به کارای کاربر (رویدادها) واکنش نشون بدیم.

این عنوان تغییر می‌کنه!

// پیدا کردن عناصر
const titleElement = document.getElementById('demo-title');
const changeTitleButton = document.getElementById('changeTitleBtn');
const changeStyleButton = document.getElementById('changeStyleBtn');

// گوش دادن به رویداد کلیک برای تغییر متن
changeTitleButton.addEventListener('click', () => {
  titleElement.innerText = "عنوان با موفقیت تغییر کرد! 😎";
});

// گوش دادن به رویداد کلیک برای تغییر استایل
changeStyleButton.addEventListener('click', () => {
  titleElement.style.color = "red";
  titleElement.style.backgroundColor = "yellow";
  titleElement.style.padding = "10px";
  titleElement.style.borderRadius = "8px";
});

تمرین! 🧠

یه اینپوت متنی و یه دکمه بساز. کاری کن که وقتی کاربر متنی رو تو اینپوت تایپ می‌کنه و روی دکمه کلیک می‌کنه، اون متن داخل یه تگ `p` زیرش نمایش داده بشه.

جواب تمرین

<!-- HTML -->
<input type="text" id="my-input" placeholder="اینجا بنویس...">
<button id="show-text-btn">نمایش متن</button>
<p id="output-text"></p>

<!-- JavaScript -->
<script>
  const input = document.getElementById('my-input');
  const button = document.getElementById('show-text-btn');
  const output = document.getElementById('output-text');

  button.addEventListener('click', function() {
    output.innerText = input.value;
  });
</script>

درس قبلی

درس ۵ از ۱۶

درس بعدی: اشیاء و کلاس‌ها