DOM daraxtida navigatsiya

HTML DOM yordamida siz tugunlar daraxti bo‘ylab tugun munosabatlari yordamida harakat qilishingiz mumkin.

DOM tugunlari

W3C HTML DOM standartiga ko‘ra, HTML hujjatidagi hamma narsa tugundir:

Butun hujjat — document tuguni (node)
Har bir HTML elementi element tugunidir
HTML elementlari ichidagi matnlar — matn tugunlari
Har bir HTML atributi — atribut tuguni (eskirgan)
Barcha izohlar — izoh tugunlari

HTML DOM yordamida tugun daraxtidagi barcha tugunlarga JavaScript orqali kirish mumkin.

Yangi tugunlarni yaratish va barcha tugunlarni o‘zgartirish yoki o‘chirish mumkin.

Tugunlar o‘rtasidagi munosabatlar

Tugun daraxtidagi tugunlar bir-biri bilan ierarxik munosabatga ega.

Ota-ona, bola va aka-uka atamalari munosabatlarni tasvirlash uchun ishlatiladi.

Tugunlar daraxtida eng yuqoridagi tugun ildiz (yoki ildiz tugun) deb ataladi
Ildizdan tashqari (uning ota tuguni yo‘q) har bir tugunning aynan bitta ota tuguni bor
Tugun bir nechta bolalarga ega bo‘lishi mumkin
Birodarlar (aka-uka yoki opa-singillar) bir ota-onaga ega bo‘lgan tugunlardir

<html>

<head>
    <title>DOM Tutorial</title>
</head>

<body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
</body>

</html>

Yuqoridagi HTML’dan quyidagilarni bilib olish mumkin:

<html> — ildiz tugun
<html> has no parents
<html> <head> va <body> ota-onasidir
<head> <html>ning birinchi farzandi
<body> — <html> oxirgi farzandi

va:

<head>’ning bitta bola tuguni bor: <title>
<title>’ning bitta bola tuguni (matn tuguni) bor: "DOM Tutorial"
<body>’ning ikkita bola tuguni bor: <h1> va <p>
<h1>’ning bitta bola tuguni bor: "DOM Lesson one"
<p>’ning bitta bola tuguni bor: "Hello world!"
<h1> va <p> — aka-uka (sibling) tugunlar

Tugunlar o‘rtasida harakatlanish

JavaScript bilan tugunlar orasida harakat qilish uchun quyidagi tugun xususiyatlaridan foydalanishingiz mumkin:

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

Bola tugunlar va tugun qiymatlari

DOMni qayta ishlashda keng tarqalgan xato - element tugunida matn bo‘lishini kutish.

Misol:

<title id="demo">DOM Tutorial</title>

Element tuguni <title> (yuqoridagi misolda) matnni o‘z ichiga olmaydi.

U "DOM Tutorial" qiymatiga ega matn tugunini o‘z ichiga oladi.

Matn tugunining qiymatiga orqali kirish mumkin tugun innerHTML xususiyat:

myTitle = document.getElementById("demo").innerHTML;

innerHTML xususiyatiga kirish nodeValue ga kirish bilan bir xil. birinchi farzandi:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Birinchi bolaga kirish quyidagi tarzda amalga oshirilishi mumkin:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Quyidagi barcha (3) misollar <h1> elementining matnini oladi va undan nusxa oladi <p> elementga:

Misol

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

InnerHTML

Ushbu qo‘llanmada biz HTML elementining mazmunini olish uchun innerHTML xususiyatidan foydalanamiz.

Biroq, yuqoridagi boshqa usullarni o‘rganish daraxt tuzilishi va DOM navigatsiyasini tushunish uchun foydalidir.

DOM ildiz tugunlari

To‘liq hujjatga kirish imkonini beruvchi ikkita maxsus xususiyat mavjud:

document.body - Hujjatning asosiy qismi
document.documentElement - The full document

Misol

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

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

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

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

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

nodeName xususiyati

nodeName xossasi tugun nomini bildiradi.

nodeName faqat o‘qish uchun
element tugunining nodeName teg nomi bilan bir xil
atribut tugunining nodeName atribut nomidir
Matn tugunining nodeName qiymati har doim #text bo‘ladi
Hujjat tugunining nodeName doim #document hisoblanadi

Misol

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

O‘zingiz sinab ko‘ring »

Eslatma: nodeName har doim HTML elementining katta harf teg nomini o‘z ichiga oladi.

nodeValue xususiyati

nodeValue xossasi tugun qiymatini belgilaydi.

element tugunlari uchun nodeValue null
Matn tugunlari uchun nodeValue matnning o‘zi
atribut tugunlari uchun nodeValue atribut qiymatidir

nodeType xususiyati

nodeType xususiyati faqat o‘qish uchun mo‘ljallangan. U tugun turini qaytaradi.

Misol

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

O‘zingiz sinab ko‘ring »

Eng muhim nodeType xususiyatlari:

Node	Type	Misol
ELEMENT_NODE	1	<h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE	2	class = "heading" (deprecated)
TEXT_NODE	3	W3Schools
COMMENT_NODE	8	<!-- This is a comment -->
DOCUMENT_NODE	9	HTML hujjatning o‘zi (<html>’ning ota elementi)
DOCUMENT_TYPE_NODE	10	<!Doctype html>

2-tip HTML DOM’da eskirgan (lekin ishlaydi). XML DOM’da u eskirmagan.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish