HTML DOM API

Dasturlash interfeysi (API)

DOM API (Application Programming Interface) — bu JavaScript-ga HTML elementlarining mazmuni, tuzilishi va uslubini o'zgartirishga imkon beruvchi Metodlar va Xususiyatlar to'plamidir.

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

API metodlari — bu HTML elementi ustida bajarishingiz mumkin bo'lgan harakatlar. API xususiyatlari — bu HTML elementida kirishingiz mumkin bo'lgan qiymatlardir.

Misol

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>

Tushuntirish

document — bu HTML hujjati.
getElementById() — bu hujjat metodi.
myPara = getElementById('demo') — "demo" elementini olib keladi.
innerHTML — bu element xususiyati.
myPara.innerHTML = 'Salom Dunyo!' — xususiyatni o'zgartiradi.

HTML DOM API imkoniyatlari

DOM API bizga quyidagi imkoniyatlarni beradi:

Elementlarni topish va tanlash
Element mazmuni va atributlarini o'zgartirish
Elementlarni qo'shish, o'chirish yoki o'zgartirish
CSS uslublarini o'zgartirish
Foydalanuvchi kiritishiga javob qaytarish uchun hodisalar tinglovchisini qo'shish

JavaScript — bu til

DOM API — bu HTML DOM elementlarini qanday olish, o'zgartirish, qo'shish yoki o'chirish bo'yicha standartdir. JavaScript — bu brauzerlarda API orqali DOM-ga kirish uchun ishlatiladigan tildir.

API metodlari va xususiyatlari

Dasturchilar har qanday API uchun kirish nuqtasi sifatida document va window kabi global obyektlardan foydalanadilar.

Agar siz HTML sahifasidagi biror elementga kirmoqchi bo'lsangiz, har doim document obyektidan boshlaysiz. document obyekti sizning veb-sahifangizni ifodalaydi.

HTML-ni JavaScript bilan boshqarish uchun avval elementni tanlashingiz kerak. Quyida HTML-ga kirish uchun document obyektidan qanday foydalanish bo'yicha ba'zi misollar keltirilgan:

HTML elementlarini tanlash

Metod	Tavsif
`document.getElementById(id)`	Elementni id orqali topadi
`document.getElementsByTagName(nomi)`	Elementlarni tegi nomi orqali topadi
`document.getElementsByClassName(nomi)`	Elementlarni klass nomi orqali topadi
`document.querySelector(selektor)`	CSS selektoriga mos keladigan birinchi elementni topadi
`document.querySelectorAll(selektor)`	CSS selektoriga mos keladigan barcha elementlarni topadi

Eslatma

document obyekti veb-sahifangizdagi barcha boshqa obyektlarning egasidir.

Element mazmuniga kirish

Xususiyat	Tavsif
`element.innerHTML`	Elementning HTML mazmuni
`element.textContent`	Elementning matnli mazmuni

Element atributlariga kirish

Xususiyat	Tavsif
`element.atribut`	HTML elementining atribut qiymatini o'zgartirish
`element.style.xususiyat`	HTML elementining uslubi (CSS)

Element atributlarini o'zgartirish

Metod	Tavsif
`element.setAttribute()`	Yangi atribut yaratish yoki o'rnatish

Tuzilishni boshqarish

Metod	Tavsif
`document.createElement()`	Yangi HTML elementi yaratadi
`document.removeChild()`	HTML elementini o'chiradi
`document.appendChild()`	HTML elementini qo'shadi
`document.replaceChild()`	HTML elementini almashtiradi

Hodisa ishlovchilarini qo'shish

Metod	Tavsif
`document.getElementById(id).onclick = function(){kod}`	`onclick` hodisasiga ishlov beruvchi kodni qo'shish

HTML DOM API ​

Dasturlash interfeysi (API) ​

Misol ​

Tushuntirish ​

HTML DOM API imkoniyatlari ​

API metodlari va xususiyatlari ​

HTML elementlarini tanlash ​

Element mazmuniga kirish ​

Element atributlariga kirish ​

Element atributlarini o'zgartirish ​

Tuzilishni boshqarish ​

Hodisa ishlovchilarini qo'shish ​