DOM bilan tanishuv
DOM nima?
DOM hujjatlarga murojaat qilish va ularni boshqarish uchun standartni belgilaydi:
"W3C Document Object Model (DOM) — dasturlar va skriptlarga hujjatning kontenti, tuzilmasi va uslubiga dinamik ravishda murojaat qilish hamda ularni yangilash imkonini beruvchi, platforma va tilga bog‘liq bo‘lmagan interfeys."
HTML DOM HTML hujjatlarga murojaat qilish va ularni boshqarishning standart usulini belgilaydi. U HTML hujjatni daraxt tuzilmasi ko‘rinishida taqdim etadi.
XML DOM XML hujjatlarga murojaat qilish va ularni boshqarishning standart usulini belgilaydi. U XML hujjatni daraxt tuzilmasi ko‘rinishida taqdim etadi.
HTML yoki XML bilan ishlaydigan har bir kishi DOM’ni tushunishi shart.
HTML DOM
Barcha HTML elementlariga HTML DOM orqali murojaat qilish mumkin.
Bu misol id="demo" bo‘lgan HTML elementining qiymatini o‘zgartiradi:
Misol
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
O‘zingiz sinab ko‘ring »
Bu misol HTML hujjatdagi birinchi <h1> elementining qiymatini o‘zgartiradi:
Misol
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
O‘zingiz sinab ko‘ring »
Eslatma: HTML hujjatda faqat BITTA <h1> elementi bo‘lsa ham, massiv indeksini [0] ko‘rsatishingiz kerak, chunki getElementsByTagName() metodi doimo massiv qaytaradi.
HTML DOM haqida bizning JavaScript darsligimizda ancha ko‘proq narsalarni o‘rganishingiz mumkin.
XML DOM
Barcha XML elementlariga XML DOM orqali murojaat qilish mumkin.
XML DOM — bu:
- XML uchun standart obyekt modeli
- XML uchun standart dasturlash interfeysi
- Platforma va tilga bog‘liq emas
- W3C standarti
Boshqacha aytganda: XML DOM — XML elementlarini olish, o‘zgartirish, qo‘shish yoki o‘chirish qanday amalga oshirilishini belgilovchi standart.
XML elementining qiymatini olish
Bu kod XML hujjatdagi birinchi <title> elementining matn qiymatini oladi:
Misol
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XML faylni yuklash
Quyidagi misollarda ishlatiladigan XML fayl — books.xml.
Bu misol "books.xml" faylini xmlDoc’ga o‘qiydi va books.xml’dagi birinchi <title> elementining matn qiymatini oladi:
Misol
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol tushuntirilishi
- xmlDoc - parser yaratgan XML DOM obyekti.
- getElementsByTagName("title")[0] - birinchi <title> elementini oladi
- childNodes[0] - <title> elementining birinchi bolasi (matn tuguni)
- nodeValue - tugunning qiymati (matnning o‘zi)
XML stringni yuklash
Bu misol matnli stringni XML DOM obyektiga yuklaydi va JavaScript yordamida undan ma’lumot ajratib oladi:
Misol
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Dasturlash interfeysi
DOM XML’ni tugun obyektlari to‘plami sifatida modellashtiradi. Tugunlarga JavaScript yoki boshqa dasturlash tillari orqali murojaat qilish mumkin. Ushbu darslikda biz JavaScript’dan foydalanamiz.
DOM’ning dasturlash interfeysi standart xususiyatlar va metodlar to‘plami bilan belgilanadi.
Xususiyatlar ko‘pincha biror narsaning qandayligini ifodalaydi (masalan, nodename — "book").
Metodlar ko‘pincha bajariladigan amalni ifodalaydi (masalan, "book"ni o‘chirish).
XML DOM xususiyatlari
Mana ba’zi odatiy DOM xususiyatlari:
- x.nodeName - x ning nomi
- x.nodeValue - x ning qiymati
- x.parentNode - x ning ota tuguni
- x.childNodes - x ning bola tugunlari
- x.attributes - x ning atribut tugunlari
Eslatma: Yuqoridagi ro‘yxatda x — tugun obyekti.
XML DOM metodlari
- x.getElementsByTagName(name) - ko‘rsatilgan teg nomiga ega barcha elementlarni oladi
- x.appendChild(node) - x ga bola tugun qo‘shadi
- x.removeChild(node) - x dan bola tugunni olib tashlaydi
Eslatma: Yuqoridagi ro‘yxatda x — tugun obyekti.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!