Chapter 32 — DOM Manipulation

Chapter 31'da elementlarni tanlashni o'rgandik. Bu bobda ularni o'zgartirish, yaratish va o'chirishni o'rganamiz.

---

32.1 Element yaratish va qo'shish

Jadval — Asosiy metodlar

Example

script.js
JavaScriptNusxalash
01let newParagraph = document.createElement("p");
02newParagraph.textContent = "Bu yangi paragraf";
03 
04document.body.appendChild(newParagraph);

How It Works

1. createElement("p") — xotirada yangi <p> element yaratadi, lekin u hali sahifada ko'rinmaydi.
2. textContent orqali unga matn beriladi.
3. appendChild() — elementni haqiqiy DOM daraxtiga (document.body ichiga) qo'shadi, shundagina u sahifada ko'rinadi.

💡 Key Idea
Element yaratish (createElement) va uni DOM'ga qo'shish (appendChild) — ikkita alohida qadam. Faqat yaratilgan, lekin qo'shilmagan element sahifada hech qachon ko'rinmaydi.

32.2 Elementni o'chirish

Example

script.js
JavaScriptNusxalash
01let element = document.getElementById("myElement");
02 
03element.remove(); // zamonaviy, oddiy usul

Eski usul (parent orqali)

script.js
JavaScriptNusxalash
01element.parentNode.removeChild(element);

🔗 Connection
remove() — zamonaviy JavaScript'da tavsiya etiladigan usul, removeChild() esa eski, ko'proq "qo'lda" boshqarishni talab qiladigan usul.

32.3 Style (CSS) bilan ishlash

Simple Explanation

Elementning CSS stilini JavaScript orqali o'zgartirish uchun style propertysi ishlatiladi.

Example

script.js
JavaScriptNusxalash
01let box = document.getElementById("box");
02 
03box.style.backgroundColor = "blue";
04box.style.width = "200px";
05box.style.display = "none"; // yashirish

⚠️ Common Mistake
CSS'dagi background-color (chiziqcha bilan) — JavaScript'da backgroundColor (camelCase) shaklida yoziladi, chiziqcha bilan emas.

classList — CSS klasslarini boshqarish

script.js
JavaScriptNusxalash
01let box = document.getElementById("box");
02 
03box.classList.add("active");     // klass qo'shish
04box.classList.remove("hidden");  // klass olib tashlash
05box.classList.toggle("dark");    // bor bo'lsa olib tashlaydi, yo'q bo'lsa qo'shadi
06box.classList.contains("active"); // true/false

🔥 Important
Ko'p CSS o'zgarishlar uchun, to'g'ridan-to'g'ri style bilan ishlashdan ko'ra, classList orqali oldindan CSS'da tayyorlangan klasslarni qo'shish/olib tashlash — kod tuzilishini ancha toza va boshqarish oson qiladi.

32.4 Atributlar bilan ishlash

Jadval

Example

index.html
HTMLNusxalash
01<img id="photo" src="old.jpg" alt="Rasm">

script.js
JavaScriptNusxalash
01let photo = document.getElementById("photo");
02 
03console.log(photo.getAttribute("src")); // "old.jpg"
04 
05photo.setAttribute("src", "new.jpg");
06photo.setAttribute("alt", "Yangi rasm");

32.5 ⚠️ Qiyin mavzu: DOM manipulyatsiyasining unumdorlik (performance) muammosi

Simple Explanation

Har safar DOM'ga o'zgartirish kiritilganda (masalan, appendChild), brauzer sahifani qayta "chizishi" (reflow/repaint) kerak bo'lishi mumkin — bu qimmat (sekin) amal. Agar loop ichida ko'p marta DOM'ni o'zgartirsangiz, bu jiddiy sekinlikka olib kelishi mumkin.

Muammoli misol

script.js
JavaScriptNusxalash
01let list = document.getElementById("list");
02 
03for (let i = 0; i < 1000; i++) {
04    let item = document.createElement("li");
05    item.textContent = "Element " + i;
06    list.appendChild(item); // ❌ Har safar DOM'ga alohida-alohida qo'shilmoqda
07}

Nima uchun bu sekin?
Har bir appendChild() chaqiruvi — brauzerga "sahifani qayta chizish" haqida signal berishi mumkin. 1000 marta alohida-alohida DOM'ga tegish — 1000 marta potentsial "qayta chizish"ni anglatadi.

Yechim — DocumentFragment

script.js
JavaScriptNusxalash
01let list = document.getElementById("list");
02let fragment = document.createDocumentFragment();
03 
04for (let i = 0; i < 1000; i++) {
05    let item = document.createElement("li");
06    item.textContent = "Element " + i;
07    fragment.appendChild(item); // fragment — "ko'rinmas" konteyner
08}
09 
10list.appendChild(fragment); // ✅ faqat BITTA marta DOM'ga tegilmoqda

How It Works

1. DocumentFragment — xotirada "vaqtinchalik" konteyner, u sahifada ko'rinmaydi va DOM'ning bir qismi emas.
2. Barcha 1000 element avval shu fragment ichiga qo'shiladi (bu sahifani qayta chizishga ta'sir qilmaydi).
3. Oxirida, fragment bitta amal sifatida haqiqiy DOM'ga (listga) qo'shiladi.

Diagram

code.text
TEXTNusxalash
01Yomon usul:                     Yaxshi usul:
02appendChild() x1000    →        DocumentFragment ichiga x1000
03     │                                    │
041000 marta "qayta chizish"        1 marta "qayta chizish"

💡 Key Idea
DocumentFragment — ko'p sonli elementlarni bir vaqtning o'zida DOM'ga qo'shish kerak bo'lganda, unumdorlikni sezilarli darajada oshiradigan texnika.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Yangi <button> elementi yarating, matnini "Bosing" qiling va document.bodyga qo'shing.
Required Concepts:

• createElement, appendChild
  Hint:
  document.createElement("button") dan foydalaning.

🟡 Exercise 2 — Medium

Task:
<div id="box"> elementiga classList orqali "active" klassini qo'shing, style orqali orqa fon rangini "yellow" qiling.
Required Concepts:

• classList
• style
  Hint:
  box.classList.add("active"); box.style.backgroundColor = "yellow";

🔴 Exercise 3 — Hard

Task:
DocumentFragment yordamida 100 ta <li> elementini yaratib, ularni bitta <ul> elementiga samarali (bitta DOM operatsiyasi bilan) qo'shing. Har bir <li> matni "Element 1" dan "Element 100"gacha bo'lsin.
Required Concepts:

• DocumentFragment
• for loop
  Hint:
  Chapter 32.5'dagi misolga o'xshab yozing.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let div = document.createElement("div");
02div.textContent = "Salom";
03 
04console.log(document.body.contains(div));
05 
06document.body.appendChild(div);
07 
08console.log(document.body.contains(div));

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

<details> <summary>Answer</summary> false true

Why?
createElement() bilan yaratilgan element — xotirada mavjud, lekin hali DOM daraxtiga (document.bodyga) qo'shilmagan, shuning uchun contains() birinchi safar false qaytaradi. appendChild() chaqirilgandan keyingina, element haqiqiy DOM'ning bir qismiga aylanadi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor — dasturchi rangni o'zgartirmoqchi, lekin ishlamayapti:

script.js
JavaScriptNusxalash
01let box = document.getElementById("box");
02 
03box.style.background-color = "red";

Your Task:

• Nima uchun bu kod sintaksis xatoligiga olib kelishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: box.style.background-color — JavaScript buni box.style.background - color (ayirish amali) deb "o'qiydi", chunki - belgisi JavaScript'da matematik operator. CSS'dagi chiziqchali nomlar JavaScript'da to'g'ridan-to'g'ri ishlatilmaydi.

Yechim: camelCase formatidan foydalanish kerak:

script.js
JavaScriptNusxalash
01box.style.backgroundColor = "red";

</details>

📌 Chapter Summary

• createElement + appendChild — yangi element yaratish va DOM'ga qo'shish.
• remove() — elementni DOM'dan olib tashlash.
• style — CSS'ni to'g'ridan-to'g'ri o'zgartirish (camelCase bilan).
• classList — CSS klasslarini qo'shish/olib tashlashning toza usuli.
• DocumentFragment — ko'p elementlarni samarali qo'shish uchun.

🎯 Key Takeaways

• Element yaratish va uni DOM'ga qo'shish — ikkita alohida qadam.
• CSS propertylari JavaScript'da camelCase formatida yoziladi (background-color → backgroundColor).
• classList — ko'p hollarda to'g'ridan-to'g'ri styledan ko'ra afzalroq (CSS'da oldindan tayyorlangan uslublardan foydalanadi).
• Ko'p sonli DOM o'zgarishlarini DocumentFragment orqali "guruhlash" — unumdorlikni oshiradi.
• contains() — element haqiqatan DOM daraxtining bir qismi ekanini tekshirish uchun foydali.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01let el = document.createElement("div");
02el.textContent = "Matn";
03parent.appendChild(el);
04el.remove();
05 
06el.style.color = "red";
07el.classList.add("active");
08el.classList.toggle("hidden");
09 
10el.setAttribute("data-id", "123");
11el.getAttribute("data-id");
12 
13let fragment = document.createDocumentFragment();

---