# DOM: element matni va uslubini o'zgartirish

> JavaScript bilan sahifani o'zgartirish: textContent, innerHTML, style va classList. Matn, uslub va CSS klasslarini boshqarishni amalda o'rganing.

Manba: https://learncode.uz/javascript/dom-ozgartirish/
Sana: 2026-05-28

Elementni topgach, uni o'zgartirish mumkin: matnini almashtirish, uslub
berish, klass qo'shish. Natija ekranda **darhol** ko'rinadi.

## Matnni o'zgartirish

```js
const h = document.querySelector("#sarlavha");

console.log(h.textContent);

h.textContent = "Yangi matn";
console.log(h.textContent);
```

```html
<h2 id="sarlavha">Eski text</h2>
```

Natija oynasida sarlavha o'zgarganini ko'rasiz.

## textContent va innerHTML

Element topish yo'llari [DOM nima](https://learncode.uz/javascript/dom-nima) darsida ko'rilgan;
bu yerda topilgan elementga matn yozishni ko'ramiz:

```js
const a = document.querySelector("#a");
const b = document.querySelector("#b");

a.textContent = "<strong>Qalin?</strong>";
b.innerHTML = "<strong>Qalin!</strong>";

console.log("textContent:", a.textContent);
console.log("innerHTML:", b.innerHTML);
```

```html
<div id="a"></div>
<div id="b"></div>
```

- `textContent` — HTML teglarini **matn deb** qabul qiladi va shundayligicha
  ko'rsatadi;
- `innerHTML` — teglarni **HTML deb** o'qiydi va qo'llaydi.

> **innerHTML va xavfsizlik**
>
> Foydalanuvchi kiritgan matnni **hech qachon** `innerHTML` ga qo'ymang. Agar
> u `<img src=x onerror="...">` yozsa, kod ishga tushadi — bu **XSS hujumi**
> deb ataladi. Foydalanuvchi ma'lumoti uchun doim `textContent` ishlating.

## Uslubni o'zgartirish

```js
const p = document.querySelector("#text");

p.style.color = "crimson";
p.style.fontSize = "20px";
p.style.fontWeight = "bold";

console.log(p.style.color);
```

```html
<p id="text">Rangli text</p>
```

CSS xossalari **camelCase** ko'rinishida yoziladi: `font-size` → `fontSize`,
`background-color` → `backgroundColor`.

## classList — klasslarni boshqarish

Uslubni to'g'ridan-to'g'ri berish o'rniga CSS klassini qo'shish afzalroq:

```js
const p = document.querySelector("#text");

p.classList.add("aktiv");
console.log(p.className);

p.classList.remove("aktiv");
console.log("olib tashlandi:", p.className);

p.classList.add("aktiv");
console.log("bormi:", p.classList.contains("aktiv"));
```

```html
<style>
  .aktiv { color: white; background: #4f46e5; padding: 6px 12px; border-radius: 6px; }
</style>
<p id="text">Holat</p>
```

| Metod | Vazifasi |
|---|---|
| `add()` | klass qo'shadi |
| `remove()` | olib tashlaydi |
| `toggle()` | bor bo'lsa olib tashlaydi, yo'q bo'lsa qo'shadi |
| `contains()` | bor-yo'qligini tekshiradi |

> **style o'rniga classList**
>
> Ko'rinishni CSS'da saqlab, JavaScript'da faqat klassni almashtiring. Shunda
> dizayn bir joyda turadi va o'zgartirish oson bo'ladi. `style` faqat
> hisoblanadigan qiymatlar uchun (masalan diagramma balandligi) qulay.

## Atributlar

```js
const a = document.querySelector("#havola");

console.log(a.getAttribute("href"));

a.setAttribute("href", "/javascript/dom-nima");
a.textContent = "DOM darsi";
console.log(a.getAttribute("href"));

const img = document.querySelector("#rasm");
img.setAttribute("alt", "Namuna rasm");
console.log(img.alt);
```

```html
<a id="havola" href="/">Havola</a>
<img id="rasm" alt="">
```

Ko'p ishlatiladigan atributlarga to'g'ridan-to'g'ri ham murojaat qilinadi:
`a.href`, `img.src`, `input.value`.

## Yangi element yaratish

```js
const ul = document.querySelector("#list");

const li = document.createElement("li");
li.textContent = "Ikkinchi";
ul.appendChild(li);

const third = document.createElement("li");
third.textContent = "Uchinchi";
third.style.color = "green";
ul.appendChild(third);

console.log("Elementlar:", ul.children.length);
```

```html
<ul id="list"><li>Birinchi</li></ul>
```

Uch qadam: `createElement` bilan yaratish → mazmun berish → `appendChild`
bilan daraxtga qo'shish. Qo'shilmaguncha element ekranda ko'rinmaydi.

## Elementni o'chirish

```js
const ul = document.querySelector("#list");
console.log("Oldin:", ul.children.length);

ul.lastElementChild.remove();
console.log("Keyin:", ul.children.length);
```

```html
<ul id="list">
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ul>
```

## Amaliy mashq

Sahifani o'zgartiring:

1. Runner'ga sarlavha qo'shib, matnini almashtiring;
2. `style` bilan rangini va o'lchamini o'zgartiring;
3. CSS klassi yaratib, `classList.add` bilan qo'llang;
4. `toggle` ni ikki marta chaqiring — natija qanday o'zgardi?
5. `createElement` bilan uchta yangi element yasab, ro'yxatga qo'shing;
6. `textContent` va `innerHTML` ga bir xil HTML matn bering va farqini ko'ring.

## Qisqacha xulosa

- `textContent` — matn sifatida; `innerHTML` — HTML sifatida (foydalanuvchi ma'lumoti uchun ishlatilmaydi).
- `style.xossa` — uslub berish, CSS nomlari **camelCase** da.
- `classList` — `add`, `remove`, `toggle`, `contains`.
- `getAttribute`/`setAttribute` — atributlar bilan ishlash.
- `createElement` + `appendChild` — yangi element; `remove()` — o'chirish.

Keyingi darsda [hodisalar](https://learncode.uz/javascript/hodisalar) — foydalanuvchi harakatiga
javob berishni ko'ramiz.