Chapter 31 — DOM Basics

PART 5 (DOM & Browser) boshlanadi. Bu qismda JavaScript'ni veb-sahifalar bilan bog'laydigan asosiy vosita — DOMni o'rganamiz.

---

31.1 DOM nima?

Simple Explanation

DOM (Document Object Model) — brauzer HTML sahifani JavaScript tushunadigan object'lar daraxti shaklida taqdim etadigan tizim.

Why Does It Exist?

HTML — statik matn fayli, u o'zi hech narsani o'zgartira olmaydi. DOM orqali JavaScript HTML elementlarini "ko'radi", o'zgartiradi, qo'shadi yoki o'chiradi — shu orqali sahifa dinamik bo'ladi.

Real-Life Analogy

🌳 DOM'ni oilaviy daraxtga o'xshating: har bir HTML element (<div>, <p>, <button>) — daraxtdagi bir "shoxcha" yoki "barg". JavaScript ushbu daraxt bo'ylab yurib, istalgan "shoxcha"ni topib, uni o'zgartirishi mumkin.

HTML va DOM munosabati

index.html
HTMLNusxalash
01<!DOCTYPE html>
02<html>
03<body>
04    <h1>Sarlavha</h1>
05    <p>Matn</p>
06</body>
07</html>

Diagram — DOM daraxti

code.text
TEXTNusxalash
01document
02   │
03   └── html
04        │
05        └── body
06             │
07             ├── h1 → "Sarlavha"
08             │
09             └── p → "Matn"

💡 Key Idea
document — DOM daraxtining "ildizi", JavaScript'dan DOM'ga kirishning boshlang'ich nuqtasi.

31.2 Elementlarni tanlash (Selecting)

Jadval — Asosiy metodlar

Example

index.html
HTMLNusxalash
01<div id="header">Sarlavha</div>
02<p class="text">Birinchi paragraf</p>
03<p class="text">Ikkinchi paragraf</p>

script.js
JavaScriptNusxalash
01let header = document.getElementById("header");
02console.log(header.textContent); // "Sarlavha"
03 
04let firstText = document.querySelector(".text");
05console.log(firstText.textContent); // "Birinchi paragraf"
06 
07let allTexts = document.querySelectorAll(".text");
08console.log(allTexts.length); // 2

🔥 Important
querySelector/querySelectorAll — zamonaviy va eng ko'p tavsiya etiladigan usul, chunki ular istalgan CSS selectorni (masalan, "#header .text:first-child") qo'llab-quvvatlaydi, getElementById/getElementsByClassNamedan farqli.

31.3 ⚠️ Qiyin mavzu: NodeList vs HTMLCollection vs Array

Simple Explanation

querySelectorAll() — NodeList, getElementsByClassName() — HTMLCollection qaytaradi. Ikkalasi ham array'ga o'xshaydi, lekin haqiqiy array emas — bu ko'plab yangi boshlovchilarni chalg'itadi.

Jadval — Farqlar

Muammoli misol

script.js
JavaScriptNusxalash
01let items = document.getElementsByClassName("item");
02 
03items.map(item => item.textContent); // ❌ TypeError: items.map is not a function

Yechim — Array'ga aylantirish

script.js
JavaScriptNusxalash
01let items = document.getElementsByClassName("item");
02 
03let itemsArray = Array.from(items);
04// yoki: let itemsArray = [...items];
05 
06itemsArray.map(item => item.textContent); // ✅ ishlaydi

Explanation

Array.from() yoki spread operator (Chapter 16) — NodeList/HTMLCollection'ni haqiqiy array'ga aylantiradi, shundan keyingina barcha array metodlari (Chapter 14-15) ishlatilishi mumkin bo'ladi.

⚠️ Common Mistake
getElementsByClassName() — "live" collection qaytaradi, ya'ni agar siz keyinchalik DOM'ga yangi element qo'shsangiz, bu collection avtomatik yangilanadi. Bu ba'zida kutilmagan xatti-harakatga (masalan, loop ichida elementlar sonining o'zgarib turishiga) olib kelishi mumkin. querySelectorAll() esa "statik" — bir marta olingandan keyin o'zgarmaydi.

31.4 Element propertylari

Jadval

Example

index.html
HTMLNusxalash
01<div id="box">
02    <b>Qalin</b> matn
03</div>

script.js
JavaScriptNusxalash
01let box = document.getElementById("box");
02 
03console.log(box.textContent); // "Qalin matn" (teglarsiz)
04console.log(box.innerHTML);   // "<b>Qalin</b> matn" (teglar bilan)

⚠️ Common Mistake
innerHTML orqali foydalanuvchidan kelgan ma'lumotni to'g'ridan-to'g'ri joylashtirish — XSS (Cross-Site Scripting) xavfsizlik zaifligiga olib kelishi mumkin (Chapter 17.5'da bu haqda gaplashgan edik). Foydalanuvchi ma'lumoti uchun har doim textContent afzalroq.

31.5 Document va Window obyektlari

Simple Explanation

• document — HTML sahifaning o'zini ifodalaydi.
• window — butun brauzer oynasini ifodalaydi, document — windowning bir qismi.

Example

script.js
JavaScriptNusxalash
01console.log(window.innerWidth);  // brauzer oynasining kengligi
02console.log(document.title);      // sahifa sarlavhasi (<title> tegi)
03console.log(document.URL);        // joriy sahifa manzili

🔗 Connection
Chapter 26-30'da ko'rgan setTimeout, setInterval — aslida window.setTimeout, window.setInterval deb yozilishi ham mumkin, chunki ular window obyektining metodlari, biz shunchaki window.ni yozmasdan qisqartirib ishlatgan edik.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
<h1 id="title">Salom</h1> elementini getElementById orqali tanlab, uning matnini konsolga chiqaring.
Required Concepts:

• getElementById
• textContent
  Hint:
  document.getElementById("title").textContent

---

🟡 Exercise 2 — Medium

Task:
querySelectorAll(".card") orqali barcha .card class'iga ega elementlarni tanlang, ularni array'ga aylantiring va har birining textContentini konsolga chiqaring.
Required Concepts:

• querySelectorAll
• Array.from
• forEach
  Hint:
  Array.from(document.querySelectorAll(".card")).forEach(...)

🔴 Exercise 3 — Hard

Task:
Sahifadagi barcha <p> elementlarini tanlang, ularning matnlarini filter() yordamida faqat 10 belgidan uzunlarini saralang, keyin map() bilan har birining uzunligini array qilib chiqaring.
Required Concepts:

• querySelectorAll
• Array.from
• filter, map (Chapter 14-15)
  Hint:
  Avval NodeList'ni array'ga aylantirishni unutmang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let items = document.getElementsByClassName("item");
02 
03console.log(typeof items.forEach);
04console.log(typeof items.map);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> undefined undefined

Why?
getElementsByClassName() — HTMLCollection qaytaradi, u haqiqiy array emas va na forEach, na map metodlariga ega. Bu metodlarni ishlatish uchun avval Array.from() orqali haqiqiy array'ga aylantirish kerak.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let paragraphs = document.querySelectorAll("p");
02 
03let texts = paragraphs.map(p => p.textContent);
04 
05console.log(texts);

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: querySelectorAll() — NodeList qaytaradi, unda map() metodi mavjud emas (forEach() esa zamonaviy brauzerlarda mavjud, lekin map yo'q).

Yechim:

script.js
JavaScriptNusxalash
01let paragraphs = document.querySelectorAll("p");
02 
03let texts = Array.from(paragraphs).map(p => p.textContent);
04// yoki: [...paragraphs].map(p => p.textContent);
05 
06console.log(texts);

</details>

📌 Chapter Summary

• DOM — HTML sahifani JavaScript uchun object'lar daraxti sifatida taqdim etadi.
• getElementById, querySelector, querySelectorAll — elementlarni tanlash uchun asosiy metodlar.
• NodeList/HTMLCollection — array'ga o'xshaydi, lekin haqiqiy array emas, Array.from() kerak.
• textContent — xavfsiz matn, innerHTML — HTML kod bilan ishlaydi (XSS xavfi bor).

🎯 Key Takeaways

• querySelector/querySelectorAll — eng moslashuvchan va tavsiya etiladigan tanlash usuli.
• NodeList/HTMLCollection'da array metodlarini ishlatish uchun Array.from() yoki spread kerak.
• Foydalanuvchi ma'lumoti bilan ishlaganda, innerHTML o'rniga textContent xavfsizroq.
• getElementsByClassName — "live" collection, querySelectorAll — statik.
• document — sahifaning o'zi, window — butun brauzer oynasi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01document.getElementById("id");
02document.querySelector(".class");
03document.querySelectorAll("p");
04 
05element.textContent;   // xavfsiz matn
06element.innerHTML;     // HTML kod bilan
07 
08Array.from(nodeList);  // haqiqiy array'ga aylantirish

---