DOM və hadisələr — JavaScript

Bu dərsdə öyrənəcəksən

DOM-un nə olduğunu izah etmək
querySelector ilə elementləri tapıb mətnini, stilini və siniflərini dəyişmək
Yeni elementlər yaratmaq və səhifəyə əlavə etmək
addEventListener ilə kliklərə, yazıya və formanın göndərilməsinə cavab vermək

Onlayn mağazada «Səbətə at» düyməsinə basırsan və yuxarıdakı səbət işarəsində rəqəm dərhal artır. Səhifə yenidən yüklənmir — JavaScript sadəcə səhifənin bir hissəsini dəyişir. Bunu DOM sayəsində edir. Bu dərsdəki bütün nümunələr canlıdır: onları işə sal, düymələrə bas, kodu dəyiş.

DOM nədir?

Tərif

DOM (Document Object Model)

Brauzerin HTML səhifədən qurduğu obyektlər ağacı. Hər teq ağacın bir düyünüdür və JavaScript bu düyünləri oxuya, dəyişə, silə və yenilərini əlavə edə bilər.

Text

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── ul
            ├── li
            └── li

Başlığı və iki bəndli siyahısı olan səhifənin DOM ağacı. Ağacın kökü document obyektidir.

Elementləri tapmaq və dəyişmək

document.querySelector() CSS seçicisi qəbul edir və uyğun gələn ilk elementi qaytarır: '#greeting' id-yə, '.note' sinfə, 'h2' teqə görə axtarır. Bütün uyğun elementlər lazımdırsa, querySelectorAll() istifadə olunur. Tapılan elementin textContent xassəsi mətni, style stili, classList isə CSS siniflərini idarə edir.

HTML· Kodu dəyiş və yenidən işə sal

<style>
  .highlight { background: #ffe58a; }
</style>

<h2 id="greeting">Hello!</h2>
<p class="note">First note</p>
<p class="note">Second note</p>

<script>
  const greeting = document.querySelector('#greeting');
  greeting.textContent = 'Hello, Baku!';
  greeting.style.color = 'teal';

  const notes = document.querySelectorAll('.note');
  notes.forEach((note, i) => {
    note.textContent = `Note number ${i + 1}`;
    note.classList.add('highlight');
  });
</script>

Önizləmə

Rəngi dəyiş, add əvəzinə toggle yaz və nəticəni müqayisə et.

Yeni elementlər yaratmaq

document.createElement('li') yeni element yaradır, amma o hələ səhifədə görünmür. Onu mövcud elementin içinə append() ilə əlavə edəndə görünür. Elementi silmək üçün element.remove() çağırılır. Beləliklə, massivdəki verilənlərdən bütöv siyahı qurmaq olar:

HTML· Kodu dəyiş və yenidən işə sal

<h3>Cities to visit</h3>
<ul id="cities"></ul>

<script>
  const cities = ['Baku', 'Ganja', 'Shaki', 'Lankaran'];
  const list = document.querySelector('#cities');

  for (const city of cities) {
    const item = document.createElement('li');
    item.textContent = city;
    list.append(item);
  }
</script>

Önizləmə

Hadisələr

Hadisə (event) səhifədə baş verən bir şeydir: klik, klaviatura düyməsinin basılması, xanaya mətn yazılması, formanın göndərilməsi. element.addEventListener('click', funksiya) brauzerə deyir: «Bu elementə klik olunanda həmin funksiyanı çağır». Bu funksiyaya hadisə emalçısı deyilir.

HTML· Kodu dəyiş və yenidən işə sal

<button id="like">Like</button>
<span id="count">0</span> likes

<script>
  let likes = 0;
  const button = document.querySelector('#like');
  const count = document.querySelector('#count');

  button.addEventListener('click', () => {
    likes++;
    count.textContent = likes;
  });
</script>

Önizləmə

Düyməyə bir neçə dəfə bas — sayğac hər klikdə artır.

Hadisə	Nə vaxt baş verir
`click`	elementə klik olunanda
`input`	xanadakı mətn dəyişəndə — hər simvolda
`submit`	forma göndəriləndə
`keydown`	klaviatura düyməsi basılanda
`mouseover`	siçan elementin üzərinə gələndə

Emalçı funksiya hadisə obyektini arqument kimi alır. Onun preventDefault() metodu brauzerin adi davranışını dayandırır — məsələn, forma göndəriləndə səhifənin yenidən yüklənməsini. Aşağıdakı nümunədə input hadisəsi yazılanı dərhal göstərir, submit isə salamlaşma mesajı çıxarır.

HTML· Kodu dəyiş və yenidən işə sal

<form id="form">
  <input id="name" placeholder="Your name">
  <button>Say hi</button>
</form>
<p id="preview">Start typing...</p>
<p id="result"></p>

<script>
  const input = document.querySelector('#name');
  const preview = document.querySelector('#preview');
  const result = document.querySelector('#result');

  input.addEventListener('input', () => {
    preview.textContent = `Typing: ${input.value}`;
  });

  document.querySelector('#form').addEventListener('submit', (event) => {
    event.preventDefault();
    result.textContent = `Hello, ${input.value || 'stranger'}!`;
  });
</script>

Önizləmə

Mini layihə: tapşırıqlar siyahısı

İndi hamısını birləşdirək: xanaya tapşırıq yaz, «Add» düyməsinə bas — siyahıya yeni bənd əlavə olunur. Bəndə klik etsən, classList.toggle onu yerinə yetirilmiş kimi qeyd edir, yenidən klik isə qeydi götürür.

HTML· Kodu dəyiş və yenidən işə sal

<style>
  li { cursor: pointer; }
  .done { text-decoration: line-through; color: gray; }
</style>

<input id="task" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></ul>

<script>
  const input = document.querySelector('#task');
  const list = document.querySelector('#list');

  document.querySelector('#add').addEventListener('click', () => {
    const text = input.value.trim();
    if (!text) return;
    const item = document.createElement('li');
    item.textContent = text;
    item.addEventListener('click', () => item.classList.toggle('done'));
    list.append(item);
    input.value = '';
  });
</script>

Önizləmə

Özün təkmilləşdir: hər bəndə silmək üçün düymə əlavə et (item.remove()).

Tapşırıq

Real layihələrdə DOM yalnız verilənləri göstərir, məntiq isə adi funksiyalarda yaşayır. Tapşırıqlar siyahısının məntiqini DOM-suz yaz: toggle(index) tapşırığın done qiymətini tərsinə çevirsin, render() isə hər tapşırığı [x] mətn və ya [ ] mətn şəklində, sonda isə Done: 1 of 3 kimi yekunu çap etsin.

Tapşırıq · JavaScript· Kodu dəyiş və yenidən işə sal

const todos = [
  { text: 'Buy bread', done: false },
  { text: 'Learn the DOM', done: false },
  { text: 'Walk the dog', done: false },
];

function toggle(index) {
  // flip todos[index].done
}

function render() {
  // print [x] text or [ ] text for every task, then Done: N of M
}

toggle(0);
toggle(2);
toggle(2);
render();

▸ Gözlənilən nəticə

[x] Buy bread
[ ] Learn the DOM
[ ] Walk the dog
Done: 1 of 3

Əsas fikirlər

DOM brauzerin HTML-dən qurduğu obyektlər ağacıdır; kökü document-dir.
querySelector ilk uyğun elementi, querySelectorAll isə hamısını qaytarır.
textContent, style, classList elementin mətnini, stilini və siniflərini dəyişir.
createElement element yaradır, append onu səhifəyə əlavə edir, remove silir.
addEventListener hadisəyə emalçı bağlayır; preventDefault() brauzerin adi davranışını dayandırır.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10

DOM nədir?