# DOM nima va u qanday tuzilgan

> DOM nima: brauzer HTML'ni obyektlar daraxtiga qanday aylantiradi va JavaScript uni qanday o'qiydi. Element, tugun va daraxt tuzilishini tushunib oling.

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

Brauzer HTML faylni o'qib, undan xotirada **obyektlar daraxti** yasaydi. Shu
daraxt **DOM** deb ataladi — *Document Object Model*. JavaScript sahifani
aynan shu daraxt orqali o'qiydi va o'zgartiradi.

## HTML va DOM

Quyidagi HTML:

```html
<body>
  <h1>Sarlavha</h1>
  <p>Matn <strong>qalin</strong> bilan</p>
</body>
```

DOM'da shunday daraxtga aylanadi:

```
body
├── h1
│   └── "Sarlavha"
└── p
    ├── "Matn "
    ├── strong
    │   └── "qalin"
    └── " bilan"
```

Har teg — **element tuguni**, ichidagi matn — **matn tuguni**. Ular
ota-bola munosabatida bog'langan.

> **Atama**
>
> **DOM** — brauzer xotirasidagi sahifa modeli. U HTML faylning o'zi emas,
> balki undan yasalgan **jonli tuzilma**: JavaScript uni o'zgartirsa, ekrandagi
> sahifa darhol yangilanadi, lekin fayl o'zgarmaydi.

## document — daraxtning ildizi

Butun DOM `document` obyekti orqali ochiladi:

```js
console.log(document.title);
console.log(document.body.tagName);
```

## Elementni topish

Eng ko'p ishlatiladigan usul — CSS selektori orqali:

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

const first = document.querySelector(".text");
console.log(first.textContent);

const all = document.querySelectorAll(".text");
console.log("Topildi:", all.length);
```

```html
<h1 id="sarlavha">Salom</h1>
<p class="text">Birinchi</p>
<p class="text">Ikkinchi</p>
```

- `querySelector` — **birinchi** mos elementni qaytaradi;
- `querySelectorAll` — **barchasini** ro'yxat sifatida.

Selektor [CSS'dagi bilan bir xil](https://learncode.uz/html-css/selektorlar): `#id`, `.class`,
`div`, `ul li` va hokazo.

## Topilmasa nima bo'ladi

```js
const missing = document.querySelector("#mavjud-emas");
console.log(missing);
```

`null` qaytadi. Shuning uchun elementga murojaat qilishdan oldin tekshirish
kerak — aks holda xato chiqadi:

```js
const missing = document.querySelector("#mavjud-emas");
missing.textContent = "salom";
```

> **Eng ko'p uchraydigan xato**
>
> `Cannot read properties of null` — bu xabar element topilmaganini bildiradi.
> Sabablari: selektorda xato, yoki skript element yaratilishidan **oldin**
> ishga tushgan. Ikkinchisini `<script>` ni `</body>` dan oldin qo'yish yoki
> `defer` atributi hal qiladi.

## Ota, bola va qo'shni

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

console.log(ul.children.length);
console.log(ul.firstElementChild.textContent);
console.log(ul.lastElementChild.textContent);

const li = ul.firstElementChild;
console.log(li.parentElement.tagName);
console.log(li.nextElementSibling.textContent);
```

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

Bu xossalar daraxt bo'ylab yurish imkonini beradi. Amalda ular kamroq
ishlatiladi — `querySelector` odatda qulayroq.

## Amaliy mashq

DOM bilan tanishing:

1. Runner'ga HTML qo'shib, `querySelector` bilan sarlavhani toping;
2. uning `textContent` va `tagName` xossalarini chiqaring;
3. `querySelectorAll` bilan bir necha elementni oling va `length` ni ko'ring;
4. mavjud bo'lmagan selektor yozing — natija nima?
5. `document.body.children.length` ni tekshiring.

4-qadamdagi `null` keyingi darsda nega tekshirish kerakligini ko'rsatadi.

## Qisqacha xulosa

- **DOM** — HTML'dan yasalgan obyektlar daraxti; JavaScript sahifani shu orqali boshqaradi.
- `document` — daraxtning ildizi.
- `querySelector` birinchi elementni, `querySelectorAll` barchasini topadi.
- Selektorlar CSS'dagi bilan bir xil.
- Element topilmasa `null` qaytadi — murojaatdan oldin tekshiring.

Keyingi darsda [elementni o'zgartirish](https://learncode.uz/javascript/dom-ozgartirish) —
matn, HTML va uslublarni yangilashni ko'ramiz.