DOM nima?

Savol

DOM nima va u HTML bilan qanday bog'liq?

Qisqa javob

DOM (Document Object Model) — brauzer xotirasidagi HTML hujjatining obyekt ko'rinishi: JavaScript o'zaro ta'sir qilishi mumkin bo'lgan (sahifani o'qish va o'zgartirish) tugunlar (elementlar, matn, atributlar) daraxti.

Batafsil javob

Brauzer HTML'ni yuklaganida, u matnni tahlil qiladi va undan obyektlar daraxtini — DOM'ni quradi. Bu HTML faylning o'zi emas, balki uning xotiradagi ko'rinishi:

• Har bir teg element-tugunga (Element) aylanadi.
• Teglar ichidagi matn — matn tuguniga (Text).
• Tugunlarning ota-onalari, bolalari va qo'shnilari bor — shundan "daraxt" nomi kelib chiqadi.

DOM — bu JavaScript tilining qismi emas, balki brauzer taqdim etadigan API (Web API'ning bir qismi). Uning orqali JS quyidagilarni qila oladi:

• elementlarni topish (document.querySelector, getElementById);
• mazmun va atributlarni o'zgartirish (element.textContent, element.setAttribute);
• tugunlarni yaratish/o'chirish (document.createElement, element.remove());
• hodisalarga obuna bo'lish (element.addEventListener).

DOM'ni HTML'dan farqlash muhim: HTML — bu asl belgilash (matn), DOM esa JS manipulyatsiyalaridan keyin asl HTML'dan farq qilishi mumkin bo'lgan xotiradagi jonli tuzilma (masalan, SPA'da belgilash deyarli to'liq skriptlar tomonidan generatsiya qilinadi).

Misol

<ul id="list">
  <li>Bir</li>
  <li>Ikki</li>
</ul>

const list = document.getElementById('list')

// DOM'ni o'qish
console.log(list.children.length) // 2

// DOM'ni o'zgartirish
const item = document.createElement('li')
item.textContent = 'Uch'
list.appendChild(item)

// Endi DOM asl HTML'dan farq qiladi,
// garchi belgilash faylida uchinchi <li> bo'lmasa ham

Qo'shimcha savollar

• DOM Vue/React ishlatadigan Virtual DOM'dan nimasi bilan farq qiladi?
• Reflow va repaint nima va nega DOM bilan tez-tez manipulyatsiya qilish qimmatga tushadi?
• DOM orqali hodisalarni delegatsiya qilish (event bubbling) qanday ishlaydi?