DOM nima va u qanday ishlaydi?

DOM o'zi nima?

Tasavvur qiling: Siz televizor ko'rayapsiz va translyatsiya qilinayotgan ko‘rsatuv sizga yoqmayapti va uni o‘zgartirmoqchisiz. Siz televizor ovozini ham balandroq qilmoqchisiz.

Buning uchun televizoringiz bilan masofadan aloqa o'rnatishingiz kerak. Bunda sizga nima yordamga keladi?

Albatta, Pult.

Masofadan boshqarish pulti sizning televizoringiz bilan muloqot qilish imkonini beruvchi ko'prik bo'lib xizmat qiladi.

Siz pult orqali televizorni faollashtirishingiz va bemalol uni boshqarishingiz mumkin. Xuddi shu tarzda, JavaScript HTML sahifasini DOM orqali faollashtiradi va uni boshqaradi.

Televizor bajarishi mumkin bo'lgan ishlar cheklangani kabi, Javacript ham sizga ayrim hisob-kitoblarni bajarish yoki asosiy string'lar bilan ishlash imkonini beradi holos.

U buni Document Object Model yoki DOM deb nomlangan interfeysdagi xususiyatlar(properties), usullar(methods) va hodisalardan(events) foydalangan holda brauzer bilan bog'lanish orqali amalga oshiradi.

Misol uchun, siz tugma bosilganda ranglarni o'zgartirishni yoki sichqonchani rasm ustiga olib borganingizda tasvirni siljitishni xohlaysiz. Buning uchun avvalombor siz JavaScript'dan ushbu elementlarga murojaat qilishingiz kerak bo'ladi.

DOM - bu brauzerga yuklanadigan veb-sahifaning daraxtga o'xshash ko'rinishi.

U bir qator obyektlardan foydalangan holda veb-sahifani tashkil qiladi. Asosiy obyekt bu document obyekti bo'lib, u ichida boshqa o'z obyektlari ega bo'lgan obyektlarni o'z ichiga oladi.

document Obyekti
Bu DOMdagi eng yuqori obyektdir. U nuqta belgisi(dot notaion) deb nomlanuvchi qoidadan foydalanib, hujjat haqida ma'lumot olish uchun foydalanishingiz mumkin bo'lgan xususiyatlar va usullarga ega.

document so'zidan so'ng siz nuqta qo'ying, undan keyin xususiyat(property) yoki usul(method) nomini yozing.

Keling, skript DOM orqali HTML hujjatiga qanday murojaat qilishi mumkinligini ko'rsatadigan oddiy kodni ko'rib chiqaylik:

<h1>Login to your account</h1>‌‌
<form name=”LoginFrm” action=”login.php” method=”post”>‌‌Username 
    <input id="username" type=”text” name=”txtUsername” size=”15”/> <br/>‌‌Password 
    <input type=”password” name=”numPassword” size=”15”/> <br/>‌‌
    <input type=”submit” value=”Log In” />‌‌
</form>‌‌
<p> New user? <a href=”register.php”> Register here</a> 
<a href=”lostPassword.php”> Retrieve password </a> 
</p>

var username = document.getElemntById("username").value;

Yuqoridagi koddagi property va metodlarga qo'shimcha ravishda, keling, boshqa mashhurlarini ham ko'rib chiqamiz

querySelectorAll() usuli.

Siz ushbu usuldan bir yoki bir nechta CSS selektorlariga mos keladigan DOM'dan bir yoki bir nechta elementlarni belgilash uchun foydalanasiz:

<div> birinchi div </div>
<p> birinchi paragraf </p>
<div> ikkinchi div </p>
<p> ikkinchi paragraf </p>
<div> yana boshqa div </div>

var paragraflar = document.querySelectorAll( 'p' );
paragraflar.forEach(paragraf => paragraf.display = 'none')

createElement() usuli.
Belgilangan elementni yaratish va uni DOM'ga kiritish uchun ushbu usuldan foydalanasiz:

<div> birinchi div </div>
<p> birinchi paragraf </p>
<div> ikkinchi div </p>
<p> ikkinchi paragraf </p>
<div> yana boshqa div </div>

var uchinchiParagraf = document.createElement('p');

getElementById() usuli.
Hujjatdan o'ziga xos id atributi bo'yicha elementni olish uchun ushbu usuldan foydalanasiz:

<div id="first"> birinchi div </div>
<p> birinchi paragraf </p>
<div> ikkinchi div </p>
<p> ikkinchi paragraf </p>
<div> yana boshqa div </div>

var birinchiDiv = getElementById("first")

appendChild() elementi.
Siz ushbu elementdan HTML teg nomi orqali bir yoki bir nechta elementlarga kirish uchun foydalanasiz.

U ushbu usulni chaqiruvchi HTML elementiga oxirgi bola(child) sifatida elementni qo'shadi.

Qo'shiladigan bola elementi yangi yaratilgan element yoki allaqachon mavjud element bo'lishi mumkin. Agar u allaqachon mavjud bo'lsa, u avvalgi joylashuvidan oxirgi bola(child) element o'rniga o'tkaziladi.

<div
     <h2>Futbol</h1>
</div>

var p = document.createElement( 'p' );
var h2 = document.querySelector( 'h2' );
var div = document.querySelector( 'div' );
h1.textContent = "Futbol juda zo'r o'yin..."
div.appendChild('p');

innerHTML property.
Siz ushbu xususiyatdan elementning matn tarkibiga kirish uchun foydalanasiz.

addEventListener() property.
Bu xususiyat elementingizga event listener biriktiradi.

Bu hodisa ishga tushirilganda callback ham ishga tushadi.

<button>Click to submit</button>

var btn = document.querySelector( 'button' );‌‌
btn.addEventListener( 'click' ,foo);‌‌
function foo() { alert( 'submitted!' ); 
                btn.innerHTML = '';
          }

Node usuli.

HTML sahifasidagi har bir element node deb nomlanadi.

Node obyekti bilan quyidagi xususiyatlardan foydalanib istalgan elementga kirishingiz mumkin:

• node.childNodes- tanlangan ota-ona(parent) elementning ichidagi elementlarga kirish imkonini beradi‌‌.

• node.firstChild – tanlangan ota-ona elementning birinchi farzand elementiga kiradi‌‌.

• node.lastChild – tanlangan ota-ona elementning oxirgi farzand elementiga kirish imkonini beradi.‌‌

• node.parentNode – tanlangan node'ning ota-ona elementiga kiradi.‌‌

• node.nextSibling – tanlangan elementning keyingi ketma-ket elementiga (aka-uka) kiradi.‌‌

• node.previousSibling – tanlangan elementning oldingi elementiga (aka-uka) kirish imkonini beradi.
  

<ul id-“list”>‌‌
    <li><a href= ”about.html”‌‌class = ”list_one”> About‌‌</a></li>‌‌
    <li><a href= ”policy.html”> Policy‌‌</a></ li>‌‌
    <li><a href= ”map.html”> Map‌‌</a></ li>‌‌
    <li><a href= ”Refund.html”> Refund‌‌</a></li>‌‌
</ul>

var list = document.getElementsById( “site-list” )‌‌
var firstItem = list‌‌.childNodes[0].childNodes[0];

Xulosa

DOM veb-sahifani tashkil etuvchi barcha elementlarning yuqoridan pastga ko'rinishidir. Bu sizning skriptingiz HTML bilan o'zaro muloqotlashadigan interfeys.

DOM haqida ma'lumot olish va uni boshqarish uchun foydalanishingiz mumkin bo'lgan ko'plab property va metodlar mavjud.

Maqola yakuniga yetdi. Ohirigacha sabr bilan o'qiganingiz uchun rahmat. Umid qilamanki, o'zingiz uchun kerakli bo'lgan ma'lumotlarni bilib oldingiz.