DOM ni ko‘rish va o‘zgartirishni boshlash

DOM tugunlarini ko‘rish

Elements panelidagi DOM daraxti (DOM Tree) — DevTools’da DOM bilan bog’liq barcha harakatlarni bajaradigan joydir.

Tugunni tekshirish

Agar sizga sahifadagi biror DOM tuguni (element) qiziq bo’lsa, Inspect funksiyasi yordamida tezda DevTools’ni ochib, shu tugunni tahlil qilishingiz mumkin.

1. Quyida Michelangelo ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.
   • Michelangelo
   • Raphael

DevTools’ning Elements paneli ochiladi va DOM daraxtida <li>Michelangelo</li> elementi ajratib ko’rsatiladi.

2. DevTools oynasining yuqori chap burchagidagi Inspect (Tekshirish) ikonkasini bosing.

3. Quyida joylashgan Tokyo matnini bosing.

• Tokyo
• Beirut

Endi DOM daraxtida <li>Tokyo</li> elementi ajratib ko’rsatiladi.

Tugunni tekshirish (Inspect) — elementning uslublarini (styles) ko’rish va o’zgartirish uchun ham birinchi qadam hisoblanadi. Batafsil: CSS’ni ko’rish va o’zgartirishni boshlash bo’limiga qarang.

Klaviatura yordamida DOM daraxtida harakatlanish

DOM daraxtida biror tugunni tanlaganingizdan so’ng, klaviatura yordamida DOM daraxtida harakatlanishingiz mumkin.

1. Quyida Ringo ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang. DOM daraxtida <li>Ringo</li> elementi tanlanadi.

• George
• Ringo
• Paul
• John

2. Klaviaturadagi yuqoriga (↑) o’q tugmasini 2 marta bosing. Natijada <ul> elementi tanlanadi.

3. Chapga (←) o’q tugmasini bosing. <ul> ro’yxati yig’iladi (collapse bo’ladi).

4. Yana bir marta chapga (←) o’q tugmasini bosing. Endi <ul> tugunining ota elementi tanlanadi. Bu holda, bu 1-qadam uchun ko’rsatmalarni o’z ichiga olgan <li> tuguni bo’ladi.

5. Pastga (↓) o’q tugmasini 3 marta bosing, shunda siz hozirgina yig’ilgan <ul> ro’yxatini qayta tanlaysiz. U quyidagicha ko’rinadi: <ul>...</ul>

6. O’ngga (→) o’q tugmasini bosing. Ro’yxat yana kengayadi (expand bo’ladi).

Ko’rinadigan joyga aylantirish (Scroll into view)

Ba’zan DOM daraxtini ko’rayotganda, sizni qiziqtirgan DOM tuguni hozirgi ko’rinishda (viewport) bo’lmasligi mumkin. Masalan, sahifaning pastiga aylantirgan (scroll qilgan) bo’lsangiz, lekin sahifaning yuqorisidagi <h1> tuguni sizga kerak bo’lsa. Scroll into view funksiyasi yordamida siz tezda ko’rinishni shu tugunga olib borishingiz va uni ekranda ko’rishingiz mumkin.

1. Quyida Magritte ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Magritte
• Soutine

2. Ushbu sahifaning pastki qismidagi Qo’shimcha: Ko’rinadigan joyga aylantirish (Appendix: Scroll into view) bo’limiga o’ting. Ko’rsatmalar u yerda davom etadi.

Sahifaning pastki qismidagi ko’rsatmalarni bajarganingizdan so’ng, yana shu yerga qayting.

O’lchov chiziqlarini ko’rsatish (Show rulers)

Viewport (ko’rinish oynasi)ning yuqori va chap tomonida o’lchov chiziqlari (rulers) paydo bo’ladi. Elements panelida biror element ustiga sichqoncha olib borganingizda, uning eni va bo’yi (width va height)ni o’lchashingiz mumkin bo’ladi.

O’lchov chiziqlarini (rulers) yoqishning ikki usuli mavjud:

• Control+Shift+P (yoki Mac’da Command+Shift+P) tugmalarini bosib, Command menyusini oching, “Show rulers on hover” deb yozing va Enter tugmasini bosing.
• Yoki sozlamalardan: Settings > Preferences > Elements > Show rulers on hover bandini belgilang.

O’lchov chiziqlarining o’lchov birligi — piksel (pixels).

Tugunlarni qidirish (Search for nodes)

DOM daraxtida matn, CSS selektori yoki XPath selektori bo’yicha qidiruv amalga oshirishingiz mumkin.

1. Kursoringizni Elements paneliga olib boring (fokuslang).
2. Control+F (yoki Mac’da Command+F) tugmalarini bosing. DOM daraxtining pastki qismida qidiruv paneli ochiladi.
3. “The Moon is a Harsh Mistress” deb yozing. DOM daraxtida ushbu so’nggi jumla ajratib ko’rsatiladi.

Yuqorida aytilganidek, qidiruv paneli (Search bar) CSS va XPath selektorlarini ham qo’llab-quvvatlaydi.

Elements paneli DOM daraxtida birinchi mos keladigan natijani tanlaydi va uni ko’rinadigan joyga olib keladi (viewport’da ko’rsatadi). Odatiy holatda, bu siz yozayotganingizda darhol sodir bo’ladi. Agar siz doim uzun qidiruv so’zlari bilan ishlasangiz, DevTools’ni faqat Enter tugmasini bosganingizda qidiruvni bajaradigan qilib sozlashingiz mumkin.

Keraksiz tugunlar orasida sakrashlarning oldini olish uchun, sozlamalardan Settings > Preferences > Global > Search as you type belgisini olib tashlang (checkbox’ni tozalang).

DOM’ni tahrirlash (Edit the DOM)

Siz DOM’ni bevosita tahrirlashingiz va bu o’zgarishlarning sahifaga qanday ta’sir qilishini darhol ko’rishingiz mumkin.

Kontentni tahrirlash (Edit content)

Tugun (node)ning kontentini tahrirlash uchun, DOM daraxtida uning kontentiga ikki marta (double-click) bosing.

1. Quyida Michelle ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Fry
• Michelle

2. DOM daraxtida Michelle ustiga ikki marta bosing. Ya’ni, <li> va </li> orasidagi matnga ikki marta bosing. Matn tanlanganini bildiruvchi ko’k rangda ajratiladi.

3. Michelle so’zini o’chirib, o’rniga Leela deb yozing, so’ng o’zgarishni tasdiqlash uchun Enter tugmasini bosing. Yuqoridagi matn Michelle’dan Leela’ga o’zgaradi.

Atributlarni tahrirlash (Edit attributes)

Atributlarni tahrirlash uchun atribut nomi yoki qiymatiga ikki marta (double-click) bosing. Quyidagi ko’rsatmalar orqali tugunga atribut qo’shishni o’rganishingiz mumkin.

1. Quyida Howard ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Howard
• Vince

2. <li> ustiga ikki marta bosing. Tugun tanlanganini bildiruvchi tarzda matn ajratiladi.

3. O’ngga (→) o’q tugmasini bosing, bitta bo’sh joy qo’shing, style="background-color:gold" deb yozing va Enter tugmasini bosing. Endi tugunning orqa foni (background color) oltin rangga o’zgaradi.

   Siz shuningdek, o’ng tugma yordamida “Edit attribute” (Atributni tahrirlash) opsiyasidan ham foydalanishingiz mumkin.

   

Tugun turini tahrirlash (Edit node type)

Tugun turini tahrirlash uchun, uning turiga ikki marta bosing va yangi turini yozing.

1. Quyida Hank ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Dean
• Hank
• Thaddeus
• Brock

2. <li> ustiga ikki marta bosing. li matni ajratiladi.

3. li so’zini o’chirib, o’rniga button deb yozing va Enter tugmasini bosing. Endi <li> tuguni <button> tuguniga aylanadi.

   

HTML sifatida tahrirlash (Edit as HTML)

Tugunlarni HTML ko’rinishida, sintaksis yoritilishi (highlighting) va avtomatik to’ldirish (autocomplete) bilan tahrirlash uchun, tugunning ochiluvchi menyusidan “Edit as HTML” opsiyasini tanlang.

1. Quyida Leonard ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Penny
• Howard
• Rajesh
• Leonard

2. Elements panelida, hozirgi tugun ustiga o’ng tugma bosing va ochiluvchi menyudan “Edit as HTML” ni tanlang.

3. Yangi qatordan boshlash uchun Enter tugmasini bosing va <l deb yozishni boshlang. DevTools siz uchun HTML sintaksisini yoritib ko’rsatadi va teglarni avtomatik to’ldiradi (autocomplete qiladi).

   

E’tibor bering: DevTools nafaqat HTML teglarini, balki DOM xossalarini ham yozishda avtomatik to’ldirish (autocomplete) funksiyasini taklif qiladi.

4. Autocomplete menyusidan li elementini tanlang va > belgisi yozing. DevTools kursoringizdan keyin avtomatik ravishda yopuvchi </li> tegini qo’shadi.

   

Teg ichiga Sheldon deb yozing va o’zgarishlarni qo’llash uchun Control (yoki Mac’da Command) + Enter tugmalarini bosing.

Tugunni dublikat qilish (Duplicate a node)

Elementni dublikat qilish uchun, o’ng tugma menyusidagi “Duplicate element” opsiyasidan foydalanishingiz mumkin.

1. Quyida Nana ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• Bonfire of the Vanities
• Nana
• Orlando
• White Noise

2. Elements panelida, <li>Nana</li> ustiga o’ng tugma bosing va ochiluvchi menyudan “Duplicate element” ni tanlang.

3. Sahifaga qayting. Ro’yxat elementi (list item) darhol dublikat qilinadi.

Shuningdek, quyidagi klaviatura qisqa tugmalaridan ham foydalanishingiz mumkin:
Shift + Alt + Pastga o’q (Windows va Linux) yoki Shift + Option + Pastga o’q (MacOS).

Tugundan skrinshot olish (Capture a node screenshot)

DOM daraxtidagi istalgan tugundan skrinshot olish uchun “Capture node screenshot” funksiyasidan foydalanishingiz mumkin.

1. Ushbu sahifadagi istalgan rasm ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

2. Elements panelida, rasm URL manzili ustiga o’ng tugma bosing va ochiluvchi menyudan “Capture node screenshot” ni tanlang.

3. Skrinshot fayli avtomatik ravishda yuklanmalar (downloads) papkangizga saqlanadi.

DOM tugunlarini qayta tartiblash (Reorder DOM nodes)

Tugunlarni qayta tartiblash uchun ularni sudrab (drag) joyini o’zgartiring.

1. Quyida Elvis Presley ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang. E’tibor bering, u ro’yxatdagi oxirgi element.

• Stevie Wonder
• Tom Waits
• Chris Thile
• Elvis Presley

2. DOM daraxtida <li>Elvis Presley</li> tugunini ro’yxatning boshiga sudrab olib chiqing.

Holatni majburan o’rnatish (Force state)

Tugunlarni :active, :hover, :focus, :visited va :focus-within kabi holatlarda majburan ushlab turishingiz mumkin.

1. Quyida The Lord of the Flies ustiga sichqoncha olib boring. Orqa fon rangi to’q sariq (orange) bo’ladi.

• The Lord of the Flies
• Crime and Punishment
• Moby Dick

2. Yuqoridagi The Lord of the Flies ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

3. <li class="demo--hover">The Lord of the Flies</li> tuguni ustiga o’ng tugma bosing va “Force State > :hover” opsiyasini tanlang. Agar bu opsiya ko’rinmasa, “Appendix: Missing options” bo’limiga qarang. Endi siz tugun ustida sichqoncha ushlab turmasangiz ham, orqa fon rangi to’q sariq bo’lib qoladi.

Tugunni yashirish (Hide a node)

Tugunni yashirish uchun H tugmasini bosing.

1. Quyida The Stars My Destination ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• The Count of Monte Cristo
• The Stars My Destination

2. H tugmasini bosing. Tugun yashiriladi. Shuningdek, tugun ustiga o’ng tugma bosib, “Hide element” opsiyasidan ham foydalanishingiz mumkin.

3. H tugmasini yana bir marta bosing. Tugun yana ko’rinadi.

Tugunni o’chirish (Delete a node)

Tugunni o’chirish uchun Delete tugmasini bosing.

1. Quyida Foundation ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• The Illustrated Man
• Through the Looking-Glass
• Foundation

2. Delete tugmasini bosing. Tugun o’chiriladi. Shuningdek, tugun ustiga o’ng tugma bosib, “Delete element” opsiyasidan ham foydalanishingiz mumkin.

3. Control+Z (yoki Mac’da Command+Z) tugmalarini bosing. So’nggi amal bekor qilinadi va tugun yana paydo bo’ladi.

Konsolda tugunlarga murojaat qilish (Access nodes in the Console)

DevTools konsolda DOM tugunlariga murojaat qilish yoki ularga JavaScript orqali havola olish uchun bir nechta qisqa yo’llarni taqdim etadi.

Hozir tanlangan tugunga $0 orqali murojaat qilish

Tugunni tekshirganingizda, uning yonida == $0 yozuvi chiqadi. Bu tugunga konsolda $0 o’zgaruvchisi orqali murojaat qilishingiz mumkinligini bildiradi.

1. Quyida The Left Hand of Darkness ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• The Left Hand of Darkness
• Dune

2. Escape tugmasini bosing va Console Drawer (konsol oynasi)ni oching.

3. $0 deb yozing va Enter tugmasini bosing. Natijada $0 o’zgaruvchisi <li>The Left Hand of Darkness</li> tuguniga teng bo’ladi.

4. Natija ustiga sichqoncha olib boring. Tugun sahifada ajratib ko’rsatiladi (highlight bo’ladi).

5. DOM daraxtida <li>Dune</li> tugunini bosing, so’ng yana konsolda $0 deb yozib, Enter tugmasini bosing. Endi $0 o’zgaruvchisi <li>Dune</li> tuguniga teng bo’ladi.

Global o’zgaruvchi sifatida saqlash (Store as global variable)

Agar biror tugunga tez-tez murojaat qilishingiz kerak bo’lsa, uni global o’zgaruvchi sifatida saqlang.

1. Quyida The Big Sleep ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• The Big Sleep
• The Long Goodbye

2. DOM daraxtida <li>The Big Sleep</li> tuguni ustiga o’ng tugma bosing va “Store as global variable” opsiyasini tanlang. Agar bu opsiya ko’rinmasa, “Appendix: Missing options” bo’limiga qarang.

3. Konsolda temp1 deb yozing va Enter tugmasini bosing. Natijada, ushbu o’zgaruvchi tugunga teng bo’ladi.

JS yo’lini nusxalash (Copy JS path)

Agar tugunga avtomatlashtirilgan testda murojaat qilishingiz kerak bo’lsa, uning JavaScript yo’lini nusxalab olishingiz mumkin.

1. Quyida The Brothers Karamazov ustiga o’ng tugma bilan bosing va “Inspect” (Tekshirish) ni tanlang.

• The Brothers Karamazov
• Crime and Punishment

2. DOM daraxtida <li>The Brothers Karamazov</li> tuguni ustiga o’ng tugma bosing va “Copy > Copy JS Path” opsiyasini tanlang. Sizning clipboard’ingizga ushbu tugunga mos keladigan document.querySelector() ifodasi nusxalanadi.

3. Konsolga ifodani joylash uchun Control+V (yoki Mac’da Command+V) tugmalarini bosing.

4. So’ng Enter tugmasini bosing va ifodani bajarilishini ko’ring.

DOM o’zgarishlarida to’xtatib turish (Break on DOM changes)

DevTools yordamida sahifadagi JavaScript DOM’ni o’zgartirganda, JavaScript bajarilishini to’xtatib turishingiz mumkin. Batafsil: “DOM change breakpoints” bo’limiga qarang.

Keyingi qadamlar (Next steps)

Bu qo’llanmada DevTools’dagi DOM bilan bog’liq asosiy funksiyalar ko’rib chiqildi. Qolgan imkoniyatlarni esa DOM daraxtidagi tugunlar ustiga o’ng tugma bosib, boshqa opsiyalarni sinab ko’rish orqali o’zingiz ham o’rganishingiz mumkin. Shuningdek, “Elements panel keyboard shortcuts” bo’limiga ham qarang.

DevTools’ning barcha imkoniyatlari bilan tanishish uchun Chrome DevTools bosh sahifasiga tashrif buyuring.

Agar DevTools jamoasi bilan bog’lanmoqchi bo’lsangiz yoki DevTools hamjamiyatidan yordam olishni istasangiz, “Community” bo’limiga qarang.

Qo’shimcha: HTML va DOM o’rtasidagi farq

Ushbu bo’limda HTML va DOM o’rtasidagi farq qisqacha tushuntiriladi.

Siz veb-brauzer orqali, masalan, https://example.com sahifasini so’raganingizda, server quyidagidek HTML qaytaradi:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

Brauzer HTML’ni tahlil qiladi va quyidagidek obyektlar daraxtini (tree) hosil qiladi:

html head title body h1 p script

Sahifa tarkibini ifodalovchi ushbu obyektlar daraxti yoki tugunlar to’plami DOM (Document Object Model) deb ataladi. Hozirda u HTML bilan bir xil ko’rinishda, lekin tasavvur qiling, HTML’ning pastki qismida ko’rsatilgan script quyidagi kodni ishga tushirsa:

const h1 = document.querySelector('h1'); h1.parentElement.removeChild(h1); const
p = document.createElement('p'); p.textContent = 'Wildcard!';
document.body.appendChild(p);

Ushbu kod h1 tugunini olib tashlaydi va DOM’ga yana bir p tuguni qo’shadi. Endi to’liq DOM quyidagicha ko’rinadi:

html head title body p script p

Endi sahifaning HTML kodi va DOM’i bir-biridan farq qiladi. Boshqacha aytganda, HTML — bu sahifaning dastlabki (initial) tarkibini ifodalaydi, DOM esa sahifaning hozirgi (current) tarkibini ifodalaydi. JavaScript tugunlarni qo’shsa, o’chirganda yoki tahrir qilganda, DOM HTML’dan farq qiladigan bo’lib qoladi.

Batafsil ma’lumot uchun “Introduction to the DOM” bo’limiga qarang.

Qo’shimcha: Ko’rinadigan joyga aylantirish (Scroll into view)

Bu “Scroll into view” bo’limining davomidir. Bo’limni yakunlash uchun quyidagi ko’rsatmalarga amal qiling.

1. DOM daraxtida <li>Magritte</li> tuguni hali ham tanlangan bo’lishi kerak. Agar tanlanmagan bo’lsa, “Scroll into view” bo’limiga qayting va bosqichlarni qayta bajaring.

2. <li>Magritte</li> tuguni ustiga o’ng tugma bosing va “Scroll into view” opsiyasini tanlang. Viewport (ko’rinish oynasi) yuqoriga aylantiriladi va Magritte tuguni ekranda ko’rinadi. Agar “Scroll into view” opsiyasi ko’rinmasa, “Appendix: Missing options” bo’limiga qarang.

Ilova: Yetishmayotgan variantlar

Ushbu qo’llanmada berilgan ko’rsatmalarning ko’pchiligida DOM daraxtidagi tugunni o’ng tugma bilan bosib, ochilgan kontekst menyusidan kerakli variantni tanlash talab qilinadi.

Agar kontekst menyusida ko’rsatilgan variantni ko’rmasangiz, tugun matnidan biroz narida o’ng tugma bilan bosib ko’ring.

Salom dunyo