JavaScript HTML DOM navigatsiyasi

HTML DOM yordamida siz tugunlar orasidagi munosabatlardan foydalanib tugunlar daraxti bo'ylab harakatlanishingiz mumkin.

---

DOM tugunlari (Nodes)

W3C HTML DOM standartiga ko'ra, HTML hujjatidagi hamma narsa tugundir:

• Butun hujjat — document node (hujjat tuguni)
• Har bir HTML elementi — element node (element tuguni)
• HTML elementlari ichidagi matnlar — text nodes (matn tugunlari)
• Har bir HTML atributi — attribute node (atribut tuguni)
• Barcha izohlar — comment nodes (izoh tugunlari)

HTML DOM bilan barcha tugunlarga JavaScript orqali kirish mumkin. Yangi tugunlar yaratish, mavjudlarini o'zgartirish yoki o'chirish mumkin.

---

Tugunlar orasidagi munosabatlar

Tugunlar daraxtidagi tugunlar bir-biri bilan iyerarxik bog'liqlikka ega. Munosabatlarni tasvirlash uchun parent (ota), child (farzand) va sibling (aka-uka/opa-singil) atamalari ishlatiladi.

• Tugunlar daraxtida eng yuqori tugun root (ildiz) deb ataladi.
• Har bir tugunning aniq bitta otasi bor, ildizdan tashqari (uning otasi yo'q).
• Tugun bir nechta farzandga ega bo'lishi mumkin.
• Aka-ukalar (siblings) — bitta otaga ega bo'lgan tugunlardir.

HTML misoli:

<html>
  <head>
    <title>DOM darsi</title>
  </head>
  <body>
    <h1>DOM Birinchi dars</h1>
    <p>Salom Dunyo!</p>
  </body>
</html>

Yuqoridagi HTML-dan quyidagilarni o'qish mumkin:

• <html> — ildiz tuguni (root). Uning otasi yo'q.
• <html> — <head> va <body> ning otasi.
• <head> — <html> ning birinchi farzandi.
• <body> — <html> ning oxirgi farzandi.

Va yana:

• <head> ning bitta farzandi bor: <title>.
• <title> ning bitta farzandi bor (matn tuguni): "DOM darsi".
• <body> ning ikkita farzandi bor: <h1> va <p>.
• <h1> va <p> — aka-ukalar (siblings).

---

Tugunlar orasida harakatlanish

JavaScript yordamida tugunlar orasida harakatlanish uchun quyidagi xususiyatlardan foydalanishingiz mumkin:

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

---

Farzand tugunlar va tugun qiymatlari

Muhim eslatma

DOM bilan ishlashda eng ko'p uchraydigan xato — element tugunining o'zida matn bor deb o'ylashdir.

Misol: <title id="demo">DOM darsi</title>

Bu yerda <title> elementi matnni o'z ichiga olmaydi. U qiymati "DOM darsi" bo'lgan matn tugunini (text node) o'z ichiga oladi.

Matn tugunining qiymatiga elementning innerHTML xususiyati orqali kirish mumkin:

let x = document.getElementById('demo').innerHTML

innerHTML ga murojaat qilish birinchi farzandning nodeValue xususiyatiga murojaat qilish bilan bir xil:

let x = document.getElementById('demo').firstChild.nodeValue

Yoki childNodes orqali:

let x = document.getElementById('demo').childNodes[0].nodeValue

---

DOM ildiz tugunlari (Root Nodes)

To'liq hujjatga kirish imkonini beruvchi ikkita maxsus xususiyat mavjud:

• document.body — hujjatning tanasi (body qismi).
• document.documentElement — butun hujjat (to'liq HTML).

---

nodeName xususiyati

nodeName xususiyati tugun nomini belgilaydi.

• nodeName faqat o'qish uchun (read-only).
• Element tugunining nodeName qiymati teg nomi bilan bir xil (har doim katta harflarda).
• Atribut tugunining nodeName qiymati atribut nomi bilan bir xil.
• Matn tugunining nodeName qiymati har doim #text.
• Hujjat tugunining nodeName qiymati har doim #document.

---

nodeValue xususiyati

nodeValue xususiyati tugun qiymatini belgilaydi.

• Element tugunlari uchun nodeValue qiymati null.
• Matn tugunlari uchun nodeValue matnning o'zi.
• Atribut tugunlari uchun nodeValue atribut qiymati.

---

nodeType xususiyati

nodeType xususiyati tugun turini qaytaradi (faqat o'qish uchun).

Eng muhim nodeType qiymatlari:

Tugun turi	Qiymat	Misol
ELEMENT_NODE	1	<h1>
ATTRIBUTE_NODE	2	class="heading" (eskirgan)
TEXT_NODE	3	Matn
COMMENT_NODE	8	<!-- izoh -->
DOCUMENT_NODE	9	Hujjatning o'zi
DOCUMENT_TYPE_NODE	10	<!DOCTYPE html>