DOM

DOM — HTML yoki XML hujjatni daraxt ko‘rinishidagi obyektlar modeli sifatida ifodalovchi standart interfeys. To‘liq nomi Document Object Model. Browser sahifani parse qilganda element, matn, atribut va boshqa node’lardan iborat DOM daraxtini yaratadi.

JavaScript DOM orqali sahifa tuzilmasini o‘qishi, o‘zgartirishi, yangi element yaratishi va hodisalarga javob berishi mumkin.

Document

DOM daraxtining yuqori obyektlaridan biri document.

U quyidagilarga kirish beradi:

• root element;
• head;
• body;
• element qidirish;
• yangi node yaratish;
• event;
• cookie va document metadata’sining ayrim qismlari.

document browserdagi joriy sahifani ifodalaydi.

Node

DOM ichidagi har bir birlik node hisoblanadi.

Node turlari:

• Document;
• Element;
• Text;
• Comment;
• DocumentFragment;
• Attribute bilan bog‘liq representation;
• boshqa maxsus node’lar.

Barcha node’lar bir xil imkoniyatga ega emas.

Element

HTML tag odatda Element node sifatida ifodalanadi.

Masalan:

<p class="intro">Salom</p>

DOMda p element, class atribut va Salom text node mavjud bo‘ladi.

Element child node va parent bilan bog‘langan.

DOM daraxti

Hujjat ierarxik tuzilishga ega:

document
└── html
    ├── head
    └── body
        ├── header
        └── main
            └── p

Parent-child relationship traversal va event propagation uchun muhim.

Element qidirish

DOM API elementlarni turli usulda topadi:

• getElementById;
• querySelector;
• querySelectorAll;
• class yoki tag bo‘yicha collection;
• relationship orqali parent yoki child.

CSS selector sintaksisidan foydalanadigan query API ko‘p holatda qulay.

Live va static collection

Ba’zi DOM collectionlar live bo‘lib, hujjat o‘zgarsa avtomatik yangilanadi.

Boshqa collectionlar query bajarilgan paytdagi static snapshot bo‘ladi.

Loop ichida DOM o‘zgartirilganda live collection soni o‘zgarishi kutilmagan natija berishi mumkin.

Element yaratish

JavaScript yangi element yaratishi mumkin:

const item = document.createElement("li");
item.textContent = "Yangi element";

Keyin u append, prepend, before yoki boshqa method bilan daraxtga qo‘shiladi.

Element yaratilishi va DOMga biriktirilishi alohida bosqichlar.

Text va HTML

textContent qiymatni oddiy matn sifatida qo‘yadi.

innerHTML esa stringni HTML sifatida parse qiladi.

Ishonchsiz inputni innerHTMLga uzatish XSS xavfini yaratishi mumkin.

Oddiy text uchun textContent xavfsizroq representation beradi.

Atribut

Element atributlari:

id
class
href
src
data-*
aria-*

kabi qiymatlarni saqlaydi.

DOM property va HTML attribute ba’zan bir xil ko‘rinadi, lekin behaviori har doim aynan teng emas.

Masalan, form elementlarda joriy qiymat va dastlabki attribute farq qilishi mumkin.

Class boshqaruvi

classList element classlarini qo‘shish, olib tashlash va almashtirish imkonini beradi.

Bu to‘liq className stringini qo‘lda boshqarishdan qulay.

CSS state va JavaScript behavior bir xil class nomiga bog‘lanishi mumkin.

Style

Elementning inline style’i DOM orqali o‘zgartiriladi.

Biroq ko‘p visual holat uchun class almashtirish yaxshiroq separation beradi.

Computed style browser hisoblagan yakuniy CSS qiymatini ko‘rsatishi mumkin.

Event

DOM elementlar event target bo‘la oladi.

Masalan:

• click;
• input;
• submit;
• keydown;
• focus;
• pointer;
• custom event.

addEventListener orqali listener ro‘yxatdan o‘tkaziladi.

Event propagation

Event daraxt bo‘ylab uch bosqichda harakat qilishi mumkin:

1. capturing;
2. target;
3. bubbling.

Bubbling event delegationga imkon beradi.

Parent element childlardan kelgan eventni bitta listener orqali boshqarishi mumkin.

Event delegation

Ko‘p list itemga alohida listener qo‘yish o‘rniga parentga bitta listener beriladi.

Event target orqali aynan qaysi child bosilgani aniqlanadi.

Dynamic qo‘shilgan childlar ham ishlaydi.

Selector va closest relationship tekshiriladi.

DOM mutation

Element qo‘shish, o‘chirish, text yoki atributni o‘zgartirish DOM mutation hisoblanadi.

MutationObserver ma’lum o‘zgarishlarni kuzata oladi.

U synchronously har kichik o‘zgarishda emas, batch qilingan notification orqali ishlashi mumkin.

Layout va paint

DOM o‘zgartirilganda browser style, layout va paint jarayonlarini qayta bajarishi mumkin.

Ko‘p ketma-ket read-write operation layout thrashing yaratishi ehtimoli bor.

DOM update’larni batch qilish performance’ni yaxshilaydi.

DocumentFragment

DocumentFragment vaqtinchalik yengil container.

Ko‘p element avval fragmentga qo‘shilib, keyin bitta operationda DOMga biriktiriladi.

Fragmentning o‘zi yakuniy daraxtda alohida element bo‘lib qolmaydi.

Shadow DOM

Shadow DOM componentning ichki DOM tuzilmasini tashqi documentdan qisman ajratadi.

U style encapsulation va reusable web componentlar uchun ishlatiladi.

Shadow root open yoki closed mode’da yaratilishi mumkin.

DOM va HTML

HTML — hujjatning matnli markup shakli.

DOM — browser parse qilgandan keyingi obyekt modeli.

Noto‘g‘ri yopilgan HTML tag browser tomonidan tuzatilishi mumkin, shuning uchun source markup va yakuniy DOM aynan bir xil bo‘lmasligi ehtimoli bor.

Parsing va tuzatish

Browser HTML parser noto‘g‘ri nesting va yopilmagan taglarni specification qoidalari bo‘yicha tuzatadi. Shu sababli view source ichidagi markup bilan developer tools ko‘rsatgan DOM farq qilishi mumkin. Security tahlilida browser aynan qanday daraxt yaratgani muhim, chunki script va CSS shu yakuniy tuzilma bilan ishlaydi.

Memory va cleanup

DOMdan o‘chirilgan elementga JavaScript reference yoki listener saqlanib qolsa garbage collection uni tozalamasligi mumkin. Uzoq ishlaydigan SPA’da bunday detached node’lar memory leak yaratadi. Component lifecycle’da listener, observer va timerlar bekor qilinadi.

Bog‘liq tushunchalar

Document Object Model, HTML, XML, Node, Element, Event, Event bubbling, Shadow DOM, MutationObserver, Browser rendering