DOM nima va u qanday tuzilgan

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:

<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.

document — daraxtning ildizi

Butun DOM document obyekti orqali ochiladi:

JavaScript

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

Elementni topish

Eng ko’p ishlatiladigan usul — CSS selektori orqali:

JavaScript

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

const birinchi = document.querySelector(".matn");
console.log(birinchi.textContent);

const hammasi = document.querySelectorAll(".matn");
console.log("Topildi:", hammasi.length);

Sahifa

querySelector — birinchi mos elementni qaytaradi;
querySelectorAll — barchasini ro’yxat sifatida.

Selektor CSS’dagi bilan bir xil: #id, .class, div, ul li va hokazo.

Topilmasa nima bo’ladi

JavaScript

const yoq = document.querySelector("#mavjud-emas");
console.log(yoq);

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

JavaScript

const yoq = document.querySelector("#mavjud-emas");
yoq.textContent = "salom";

Ota, bola va qo’shni

JavaScript

const ul = document.querySelector("#royxat");

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);

Sahifa

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

Amaliy mashq

DOM bilan tanishing:

Runner’ga HTML qo’shib, querySelector bilan sarlavhani toping;
uning textContent va tagName xossalarini chiqaring;
querySelectorAll bilan bir necha elementni oling va length ni ko’ring;
mavjud bo’lmagan selektor yozing — natija nima?
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 — matn, HTML va uslublarni yangilashni ko’ramiz.