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>`

JavaScript HTML DOM navigatsiyasi ​

DOM tugunlari (Nodes) ​

Tugunlar orasidagi munosabatlar ​

HTML misoli: ​

Tugunlar orasida harakatlanish ​

Farzand tugunlar va tugun qiymatlari ​

DOM ildiz tugunlari (Root Nodes) ​

nodeName xususiyati ​

nodeValue xususiyati ​

nodeType xususiyati ​