DOM va hodisalar

DOM nima

Brauzer sizning HTML’ingizni yuklaganida, uni DOM (Document Object Model) deb ataladigan jonli obyektlar daraxtiga aylantiradi. JavaScript bu daraxtni o‘qiy va o‘zgartira oladi, sahifa esa darhol yangilanadi. DOM — sizning kodingiz bilan foydalanuvchi ko‘rayotgan narsa o‘rtasidagi ko‘prikdir.

Elementlarni tanlash

Biror narsani o‘zgartirish uchun avval unga havolani olasiz. Eng ko‘p ishlatadigan ikkitasi:

// by CSS selector — returns the FIRST match
const title = document.querySelector("h1");
const btn = document.querySelector(".submit-btn");
 
// by CSS selector — returns ALL matches (a NodeList)
const items = document.querySelectorAll("li");

querySelector istalgan CSS selektorni (#id, .class, tag) qabul qiladi, bu esa uni moslashuvchan va eslab qolish oson qiladi. querySelectorAll esa sizga forEach bilan aylanib chiqishingiz mumkin bo‘lgan ro‘yxatni beradi.

Kontentni o‘qish va o‘zgartirish

Element qo‘lingizda bo‘lganidan so‘ng, uning matni, HTML’i va atributlarini o‘qiy yoki o‘rnata olasiz:

title.textContent = "Welcome!";        // safest — sets plain text
title.innerHTML = "<em>Welcome</em>";  // parses HTML (use with care)
 
img.setAttribute("src", "photo.jpg");
input.value = "";                      // clear a form field

Foydalanuvchi kiritgan matnni joylashtirayotganingizda innerHTML o‘rniga textContent dan foydalaning — innerHTML o‘sha satrdagi har qanday HTML teglarini ishga tushiradi, bu esa xavfsizlik xatari hisoblanadi (aynan shu tarzda "XSS" hujumlari ishlaydi).

Uslublar va klasslarni o‘zgartirish

Uslublarni to‘g‘ridan-to‘g‘ri o‘rnatish mumkin, ammo CSS klasslarni almashtirish (toggle) yanada toza yondashuvdir, chunki u uslublashni sizning stylesheet’ingizda saqlaydi:

box.style.color = "red";          // direct style
 
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("open");     // add if absent, remove if present

classList.toggle menyuni ochish/yopish kabi narsalar uchun juda mos keladi.

Hodisalar bilan ishlash

Hodisa (event) — bu sodir bo‘ladigan biror narsa: bosish (click), tugmani bosish (keypress), forma yuborish (submit). Siz unga addEventListener orqali listener (tinglovchi) ulab, unga javob berasiz:

const button = document.querySelector("button");
 
button.addEventListener("click", () => {
  console.log("clicked!");
});

Birinchi argument — hodisaning nomi ("click", "input", "submit", "keydown"), ikkinchisi esa hodisa ishga tushganda bajariladigan funksiyadir. Bu funksiya handler (ishlovchi) deb ataladi.

Hodisa obyekti

Sizning handler’ingiz nima sodir bo‘lgani haqidagi tafsilotlarga ega bo‘lgan hodisa obyekti (event object) ni oladi:

input.addEventListener("input", (event) => {
  console.log(event.target.value);   // what the user typed
});
 
form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the page from reloading
  // ...handle the form data
});

Doimiy ravishda ishlatadigan ikki narsa:

• event.target — hodisani ishga tushirgan element.
• event.preventDefault() — brauzerning standart harakatini bekor qiladi (masalan, formaning sahifani qayta yuklashi yoki havolaning boshqa joyga o‘tishi).

Hammasini birlashtirish

Kichkina hisoblagich — tanlash + hodisalar + DOM yangilanishlarini ulash:

let count = 0;
const display = document.querySelector("#count");
const button = document.querySelector("#increment");
 
button.addEventListener("click", () => {
  count++;
  display.textContent = count;
});

Intervyu maslahatlari

• querySelector istalgan CSS selektorni qabul qiladi va birinchi mosini qaytaradi; querySelectorAll esa hammasini qaytaradi.
• XSS’dan qochish uchun foydalanuvchi kiritmasi uchun innerHTML o‘rniga textContent dan foydalaning.
• Handler’larni addEventListener("click", fn) bilan ulang.
• event.target (nimaki uni ishga tushirgan) va event.preventDefault() (standart harakatni to‘xtatish, masalan, formaning qayta yuklanishi) ni biling.