Hujjat (DOM)

DOM daraxti

HTML hujjatning asosi — teglar. DOM (Document Object Model) modeliga ko'ra, har bir HTML tegi obyektga aylanadi. Ichma-ich joylashgan teglar tashqi teglarning "bolalari" bo'ladi. Teg ichidagi matn ham obyekt sanaladi. Bu obyektlarning barchasi bizga JavaScript orqali ochiq bo'lib, ular yordamida sahifani boshqaramiz. Ushbu darsda HTML'dan hosil bo'ladigan DOM daraxtini chuqur o'rganamiz.

Misol DOM daraxti

Keling, oddiy bir hujjatni ko'raylik:

<!DOCTYPE HTML>
<html>
<head>
  <title>Bosh sahifa haqida</title>
</head>
<body>
  Salom, men bu sahifamanman
</body>
</html>

DOM bu hujjatni tugunlar (nodes) daraxti sifatida ifodalaydi. Har bir teg element tuguni (element node) — daraxtning asosiy "g'ishtchasi"dir. Ular daraxtni tashkil qiladi: <html> — ildiz, <head> va <body> uning bolalari, va hokazo.

Elementlar ichidagi matn matn tugunlarini (text nodes) tashkil qiladi. Matn tuguni faqat satr (string) saqlaydi. Uning boshqa bolalari bo'la olmaydi va u har doim daraxtning "bargi" (leaf) hisoblanadi.

Masalan, yuqoridagi hujjatda <title> ichida "Bosh sahifa haqida" matn tuguni bor, <body> ichida esa "Salom, men bu sahifamanman" matn tuguni joylashgan.

Daraxtda ikki turdagi asosiy tugunlar ishtirok etadi: element tugunlari (teglar) va matn tugunlari (matn bo'laklari). Ular birgalikda DOM tuzilishini hosil qiladi.

Bo'shliqlar va yangi qatorlar

Muhim jihat: matn tugunlarida bo'shliqlar (spaces) va yangi qator (newline) belgilari ham hisobga olinadi. Ular ham to'liq huquqli belgilar bo'lib, matn tugunlarini hosil qiladi va DOM'ning bir qismi bo'ladi.

Masalan, quyidagi HTML'da <head>dan oldin va matn ichida bo'shliq va yangi qatorlar bor — ular ham DOM'ga tushadi:

<!DOCTYPE HTML>
<html>
<!-- bu yerdagi yangi qator + bo'shliq ham matn tuguni bo'ladi -->
<head>...</head>
...
</html>

Biroq ikkita istisno bor:

  1. Tarixiy sabablarga ko'ra, <head>dan oldingi bo'shliqlar va yangi qatorlar e'tiborga olinmaydi (ular tashlab yuboriladi);
  2. Agar biror narsani </body>dan keyin yozsak, brauzer uni avtomatik ravishda body ichiga ko'chiradi, chunki HTML spetsifikatsiyasiga ko'ra barcha mazmun <body> ichida bo'lishi kerak. Shuning uchun </body>dan keyin bo'shliq bo'lmaydi.
Boshqa hollarda hamma narsa to'g'ridan-to'g'ri: agar hujjatda bo'shliqlar bo'lsa — ular DOM'da matn tugunlari sifatida ko'rinadi, agar olib tashlansak — ular yo'qoladi. Bu ba'zan JavaScript'da tugunlar bo'ylab harakatlanganda kutilmagan "bo'sh" matn tugunlariga duch kelishimizga sabab bo'ladi.

Avtomatik tuzatish (autocorrection)

Agar brauzer noto'g'ri (buzuq) HTML'ga duch kelsa, DOM'ni hosil qilishda uni avtomatik ravishda tuzatadi. Masalan, yuqoridagi hujjatda ochilish <html> tegi yo'q — bu muhim emas. Brauzer buni sezib, avtomatik qo'shadi, chunki bu tegga hujjat majburan ega bo'lishi kerak.

Xuddi shunday, agar hujjatda umuman <html>, <head> yoki <body> teglari yozilmagan bo'lsa ham, DOM'da ular baribir mavjud bo'ladi. Brauzer ularni yaratadi:

// hatto matndan iborat oddiy HTML uchun ham
// DOM'da <html>, <head>, <body> teglari mavjud bo'ladi

Jadvallar bilan ishlashda qiziq holat bor. DOM spetsifikatsiyasiga ko'ra, <table> ichida albatta <tbody> bo'lishi kerak. Ammo HTML'da uni yozmasligimiz mumkin. Bunday holda brauzer uni DOM'da avtomatik yaratadi:

<table id="table">
  <tr>
    <td>1</td>
  </tr>
</table>

<!-- DOM'da brauzer <table> va <tr> orasiga
     avtomatik <tbody> qo'shadi -->
Bu muhim! Jadval elementlari bo'ylab JavaScript'da harakatlanganda, <table>ning bevosita bolasi <tr> emas, balki <tbody> bo'ladi — hatto uni HTML'da yozmagan bo'lsak ham. Buni unutmaslik kerak, aks holda tugunlar bo'ylab harakatlanish kutilmagan natija berishi mumkin.

Yopilmagan teglar, xato joylashgan atributlar — bularning hammasini brauzer DOM hosil qilishda "tuzatadi". Shu sababli, HTML' da xatolik bo'lsa ham, brauzer baribir biror-bir daraxt tuzadi.

Boshqa tugun turlari

Elementlar va matn tugunlaridan tashqari yana bir necha tugun turlari bor. Masalan, izohlar (comments):

<!DOCTYPE HTML>
<html>
<body>
  Salom
  <!-- Bu izoh -->
</body>
</html>

Bu yerda <!-- Bu izoh --> ham DOM'da tugun sifatida ko'rinadi — izoh tuguni (comment node). Savol tug'ilishi mumkin: nega izoh DOM'ga qo'shiladi? U ekranda hech narsa ko'rsatmaydi-ku?

Buning uchun bir qoida bor: HTML'da nima bo'lsa, DOM'da ham shu bo'ladi. Izohlar ham, hatto <!DOCTYPE...> direktivasi ham DOM tuguni hisoblanadi. Hech narsa e'tibordan chetda qolmaydi.

Umuman olib qaraganda, 12 turdagi tugun mavjud. Amaliyotda biz asosan 4 tasi bilan ishlaymiz:

  1. document — DOM'ga "kirish nuqtasi", eng yuqori tugun;
  2. element tugunlari — HTML teglari, daraxtni tashkil etuvchi asosiy bloklar;
  3. matn tugunlari — matnni saqlaydi;
  4. izohlar — ekranda ko'rinmaydi, ammo ma'lumot uchun DOM'ga qo'shiladi. Ular orqali JavaScript'ga "ko'rsatma" berish kabi hiylalar ham qilinadi.
Har bir tugunning turini bildiruvchi son bor — nodeType. Bu haqda "Node xossalari" darsida batafsil to'xtalamiz. Hozircha esa asosiy 4 turni eslab qolish kifoya.

DevTools'da DOM'ni ko'rish

DOM'ni amaliy o'rganish va u bilan ishlash uchun brauzerning ishlab chiquvchi vositalari (Developer Tools, qisqacha DevTools) juda qulay. Ularni F12 tugmasi bilan ochib, Elements (Elementlar) bo'limiga o'ting. U yerda siz DOM daraxtini interaktiv holda ko'rasiz.

DevTools va JavaScript konsoli o'rtasida qulay o'zaro bog'lanish bor:

  1. Elements bo'limida biror elementni tanlang;
  2. Console'ga o'ting va $0 deb yozing — u yaqinda tanlangan elementga ishora qiladi;
  3. Aksincha ham: agar konsolda biror tugun (masalan, document.body) chiqarilgan bo'lsa, uning ustiga o'ng tugmani bosib, Reveal in Elements panel ni tanlab, uni Elements bo'limida ko'rishingiz mumkin.
// Console'da tanlangan elementni tekshirish
inspect($0); // tanlangan elementni Elements'da ko'rsatadi

// $0, $1, $2 ... — oxirgi tanlangan elementlar tarixi
DevTools — DOM bilan ishlaganda eng yaxshi do'stingiz. Har bir yangi metod yoki xossani o'rganganingizda, uni konsolda sinab ko'rish odatini shakllantiring. Bu materialni tezroq va chuqurroq o'zlashtirishga yordam beradi.

Xulosa