HTML DOM

HTML Document Object Model

HTML DOM (HTML Document Object Model) — bu HTML hujjatlari uchun obyekt modeli.

mermaid

graph TD
    Document(Hujjat / Document) --> HTML{HTML}
    HTML --> Head{Head}
    HTML --> Body{Body}
    Head --> Title[Sarlavha / Title]
    Title --> TitleText["Mening sarlavham"]
    Body --> H1[H1]
    Body --> A[Havola / a]
    H1 --> H1Text["Mening sarlavham"]
    A --> AHref["href atributi"]
    A --> AText["Mening havolam"]

INFO

HTML DOM — bu HTML sahifasini ifodalovchi tugunlar (Nodes) daraxti.

DOM daraxti

Veb-sahifa yuklanganda, brauzer HTML hujjatining daraxtga o'xshash ko'rinishini yaratadi. Hujjatning har bir qismi daraxtdagi tugunlardir:

Tugun (Node)	Tavsif
Hujjat (Document)	Hujjatdagi barcha tugunlarning egasi
`<html>`	Element tuguni
`<head>`	Element tuguni
`<body>`	Element tuguni
`<a>`	Element tuguni
`href`	Atribut tuguni
`<h1>`	Element tuguni
Matn (Text)	Matn tuguni

HTML elementlariga kirish

HTML elementlariga kirish uchun HTML DOM dan foydalanish mumkin. HTML elementiga kirishning eng keng tarqalgan usuli bu elementning id sidan foydalanishdir:

html

<html>
  <body>
    <p id="demo"></p>

    <script>
      // Paragraf elementiga kirish
      const myPara = document.getElementById('demo')

      // Element mazmunini o'zgartirish
      myPara.innerHTML = 'Salom Dunyo!'
    </script>
  </body>
</html>

Yuqoridagi misolda getElementById metodi elementni topish uchun id="demo" dan foydalangan.

id="demo" — bu HTML xususiyati (property)
getElementById() — bu DOM metodi
innerHTML — bu DOM xususiyati (property)

Siz nimalarni o'rganasiz

Ushbu qo'llanmaning keyingi boblarida siz quyidagilarni o'rganasiz:

HTML elementlarining mazmunini qanday o'zgartirishni
HTML elementlarining uslubini (CSS) qanday o'zgartirishni
HTML elementlarini qanday qo'shish va o'chirishni
HTML elementlaridan keladigan hodisalarga qanday javob qaytarishni

World Wide Web Konsortsiumi (W3C)

DOM — bu W3C standarti (World Wide Web Consortium):

"W3C Document Object Model (DOM) — bu dasturlar va skriptlarga hujjatning mazmuni, tuzilishi va uslubiga dinamik tarzda kirish va yangilash imkonini beruvchi platforma va tildan mustaqil interfeysdir."

W3C DOM standarti 3 xil qismga bo'lingan:

Core DOM — barcha hujjat turlari uchun standart model
XML DOM — XML hujjatlari uchun standart model
HTML DOM — HTML hujjatlari uchun standart model

Eslatma

HTML DOM — bu W3C va WHATWG tomonidan ishlab chiqilgan tildan mustaqil standartdir.

HTML DOM ​

HTML Document Object Model ​

DOM daraxti ​

HTML elementlariga kirish ​