11-Dars DOM | Notion

DOM (Document Object Model) nima?

DOM (Document Object Model) — bu veb-sahifa tuzilishini ob’ekt sifatida ifodalovchi model. JavaScript orqali HTML elementlarini o‘qish, o‘zgartirish, qo‘shish va o‘chirish imkonini beradi.

1. DOM qanday ishlaydi?

Brauzer sahifani yuklaganda:

1️⃣ HTML kodini o‘qiydi

2️⃣ Tuzilma daraxti (DOM) yaratadi

3️⃣ JavaScript bilan o‘zgarishlar qilish imkonini beradi

2. DOM daraxti (strukturasi)

HTML kod quyidagi kabi tuzilishga ega bo‘lishi mumkin:

<!DOCTYPE html>
<html>
<head>
    <title>Mening sahifam</title>
</head>
<body>
    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi sahifam.</p>
</body>
</html>

🔽 Brauzer uni quyidagi shaklda DOM daraxtiga aylantiradi:

 ├── html
 │   ├── head
 │   │   ├── title → "Mening sahifam"
 │   ├── body
 │       ├── h1 → "Salom, dunyo!"
 │       ├── p → "Bu mening birinchi sahifam."

DOM-da har bir HTML elementi — ob’ekt hisoblanadi va u bilan JavaScript orqali ishlash mumkin.

3. DOM bilan ishlash

JavaScript orqali DOM ob’ektlarini tanlash, o‘zgartirish, qo‘shish va o‘chirish mumkin.

3.1 Elementni tanlash

let h1Element = document.querySelector("h1"); // Birinchi <h1> elementni oladi
console.log(h1Element.textContent); // "Salom, dunyo!"