DOM tugunlari bo‘ylab harakatlanish
Tugunlar bo‘ylab tugunlar munosabatlaridan foydalanib harakatlanish mumkin.
DOM tugunlari bo‘ylab harakatlanish
Tugunlar daraxtidagi tugunlarga tugunlar o‘rtasidagi munosabat orqali murojaat qilish ko‘pincha "tugunlar bo‘ylab harakatlanish" (navigating nodes) deb ataladi.
XML DOM’da tugunlar munosabatlari tugunlarning xususiyatlari sifatida belgilanadi:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
Quyidagi rasm books.xml faylidagi tugunlar daraxtining bir qismini va tugunlar orasidagi munosabatni tasvirlaydi:
DOM - ota tugun
Barcha tugunlarning aynan bitta ota tuguni bor. Quyidagi kod <book> elementining ota tuguniga o‘tadi:
Misol
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
O‘zingiz sinab ko‘ring »
Misol tushuntirilishi:
- books.xml faylini xmlDoc’ga yuklang
- Birinchi <book> elementini oling
- "x" ning ota tuguni nomini chiqaring
Bo‘sh matn tugunlaridan qoching
Ba’zi brauzerlar bo‘sh joylar yoki yangi qatorlarni matn tugunlari sifatida qabul qilishi mumkin. Bu firstChild, lastChild, nextSibling, previousSibling xususiyatlaridan foydalanganda muammo tug‘diradi.
Bo‘sh matn tugunlariga (element tugunlari orasidagi bo‘sh joy va yangi qator belgilariga) o‘tib qolmaslik uchun tugun turini tekshiradigan funksiyadan foydalanamiz:
function get_nextSibling(n) {
var y = n.nextSibling;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}Yuqoridagi funksiya node.nextSibling xususiyati o‘rniga get_nextSibling(node) dan foydalanish imkonini beradi.
Kod tushuntirilishi:
Element tugunlarining turi 1 ga teng. Agar qo‘shni tugun element tuguni bo‘lmasa, funksiya element tuguni topilguncha keyingi tugunlarga o‘tadi.
Birinchi bola elementni olish
Quyidagi kod birinchi <book> elementining birinchi element tugunini ko‘rsatadi:
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;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Natija:
title
O‘zingiz sinab ko‘ring »
Misol tushuntirilishi:
- books.xml faylini xmlDoc’ga yuklang
- Element tuguni bo‘lgan birinchi bola tugunni olish uchun birinchi <book> element tuguniga get_firstChild funksiyasini qo‘llang
- Element tuguni bo‘lgan birinchi bola tugunning nomini chiqaring
Ko‘proq misollar
lastChild()
Tugunning oxirgi bola tugunini olish uchun lastChild() metodi va maxsus funksiyadan foydalaning.
nextSibling()
Tugunning keyingi qo‘shni tugunini olish uchun nextSibling() metodi va maxsus funksiyadan foydalaning.
previousSibling()
Tugunning oldingi qo‘shni tugunini olish uchun previousSibling() metodi va maxsus funksiyadan foydalaning.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!