DOM metodlari
Dasturiy ilova interfeysi (API)
DOM API (Application Programming Interface) - bu JavaScript-ga har qanday HTML elementlarining mazmuni, tuzilishi va uslubini o‘zgartirish imkonini beruvchi usullar va xususiyatlar to‘plami.
API usuli - bu HTML elementida bajarishingiz mumkin bo‘lgan harakat.
API xususiyati - bu HTML elementida kirishingiz mumkin bo‘lgan Qiymat.
Misol
<html>
<body>
<p id="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol tahlili
document — bu HTML hujjat.
getElementById() — document metodi.
myPara = getElementById("demo") retrieves the "demo" element.
innerHTML — element xususiyati.
myPara.innerHTML = "Hello World!" changes the property.
HTML DOM API imkoniyatlari
DOM API bizga quyidagi imkoniyatlarni beradi:
- Elementlarni topish va tanlash
- Element tarkibi va atributlarini o‘zgartirish
- Elementlarni qo‘shish, olib tashlash yoki o‘zgartirish
- Change CSS styles
- Foydalanuvchi harakatlariga javob berish uchun hodisa tinglovchilarini (event listener) qo‘shish
JavaScript — bu til
DOM API HTML DOM elementlarini olish, o‘zgartirish, qo‘shish yoki o‘chirish uchun standartdir.
JavaScript - bu API orqali DOMga kirish uchun brauzerlarda ishlatiladigan til.
API metodlari va xususiyatlari
Ishlab chiquvchilar hujjat va oyna kabi global obyektlardan istalgan APIga kirish nuqtasi sifatida foydalanadilar.
Agar siz HTML-sahifadagi istalgan elementga kirishni istasangiz, siz doimo hujjat obyektiga kirishdan boshlaysiz. Hujjat obyekti veb-sahifangizni ifodalaydi.
HTMLni JavaScript yordamida boshqarish uchun avval elementni tanlashingiz kerak.
Quyida HTML-ga kirish uchun hujjat obyektidan qanday foydalanish mumkinligiga misollar keltirilgan:
HTML elementlarini tanlash
| Metod | Tavsif |
|---|---|
| document.getElementById(id) | Elementni element id’si bo‘yicha topish |
| document.getElementsByTagName(name) | Elementlarni teg nomi bo‘yicha topish |
| document.getElementsByClassName(name) | Elementlarni klass nomi bo‘yicha topish |
| document.querySelector(selector) | CSS selektoriga mos keladigan birinchi elementni topish |
| document.querySelectorAll(selector) | CSS selektoriga mos keladigan barcha elementlarni topish |
Element tarkibiga murojaat qilish
| Xususiyat | Tavsif |
|---|---|
| element.innerHTML | Elementning HTML tarkibi |
| element.textContent | Elementning matn tarkibi |
Element atributlariga murojaat qilish
| Xususiyat | Tavsif |
|---|---|
| element.attribute.Atribut | HTML elementining atribut qiymatini o‘zgartiring |
| element.style.property.style.Xususiyat | HTML elementining uslubi |
Element atributlarini o‘zgartirish
| Metod | Tavsif |
|---|---|
| element.setAttribute() | Yangi atribut yaratish yoki o‘rnatish |
Tuzilmani o‘zgartirish
| Metod | Tavsif |
|---|---|
| document.createElement() | Yangi HTML elementini yaratadi |
| document.removeChild() | HTML elementini olib tashlash |
| document.appendChild() | HTML elementini qo‘shish |
| document.replaceChild() | HTML elementini almashtirish |
Hodisa ishlovchilarini qo‘shish
| Metod | Tavsif |
|---|---|
| document.getElementById(id).onclick = function(){code} | onclick hodisasiga hodisa ishlovchisi kodini qo‘shish |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!