DOM — getElementById, querySelector, querySelectorAll

~15 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

Siz tugma yozdingiz. Foydalanuvchi bosganida rang o'zgarishi kerak. JavaScript da buni qilish uchun avval o'sha tugmani topish kerak — keyin o'zgartirish.

Lekin HTML da o'nlab, yuzlab elementlar bo'lishi mumkin. Qaysi biri kerakligini JavaScript qanday biladi? Qanday aytamiz: "mana o'sha tugma, boshqalari emas"?

Buning uchun DOM ni qidirish metodlari kerak.

DOM nima? Qisqacha eslatma

Brauzer HTML ni o'qigach, uni daraxt ko'rinishida xotirada saqlaydi. Bu daraxt — DOM (Document Object Model). Har bir HTML teg — daraxtdagi bir tugun.

JavaScript bu daraxtga document ob'ekti orqali kiradi. Elementlarni topish, o'zgartirish, qo'shish, o'chirish — hammasi document orqali.

getElementById — ID bo'yicha topish

Har bir HTML elementga id atributi berilishi mumkin. ID — sahifada yagona bo'lishi kerak. Ikki element bir xil id ga ega bo'lsa — bu xato.

<button id="yuborish-tugma">Yuborish</button>

const tugma = document.getElementById("yuborish-tugma");

Hayotiy o'xshatma

Pasport raqami. Har bir fuqaroning o'ziga xos raqami bor — ikki kishi bir xil raqamga ega bo'lmaydi. "12345678 raqamli fuqaroni toping" — yagona natija. getElementById — xuddi shunday. id sahifada yagona, shuning uchun natija ham yagona.

Element topilmasa — null qaytaradi. Shuning uchun topilganini tekshirish kerak:

const tugma = document.getElementById("yuborish-tugma");

if (!tugma) {
  console.warn("Tugma topilmadi");
  return;
}

tugma.style.color = "red";

querySelector — CSS selector bo'yicha topish

querySelector — CSS da yozganday selektor berish, birinchi mos elementni olish.

Hayotiy o'xshatma

Kutubxona katalogi. "Biologiya bo'limidagi birinchi kitobni bering" — katalogga selektor berasiz, birinchi natija keladi. querySelector — o'sha katalog. CSS selektor tizimini bilsangiz — querySelector da ham ishlata olasiz.

<ul class="menu">
  <li class="faol">Bosh sahifa</li>
  <li>Haqida</li>
  <li>Bog'lanish</li>
</ul>

// CSS da qanday yozilsa — querySelector da ham shunday
const faolPunkt = document.querySelector(".menu .faol");
const birinchi  = document.querySelector("ul li");
const havolalar = document.querySelector("a[href]");

querySelector — birinchi mos elementni qaytaradi. Topilmasa — null.

querySelector vs getElementById

getElementById faqat id bo'yicha qidiradi. querySelector esa istalgan CSS selektor: sinf, teg, atribut, ichma-ich kombinatsiya.

// Bu ikkisi bir xil natija beradi:
document.getElementById("bosh-menu");
document.querySelector("#bosh-menu");

// Lekin querySelector ko'proq narsa qila oladi:
document.querySelector(".menu > li:first-child");
document.querySelector("input[type='email']");
document.querySelector("article p.kirish");

Qoida: faqat id kerak bo'lsa — getElementById tezroq va aniqroq. Murakkab selektor kerak bo'lsa — querySelector.

querySelectorAll — hammasini topish

querySelector birinchisini topadi. querySelectorAll — selectorga mos barcha elementlarni topadi.

<ul>
  <li class="mahsulot">Noutbuk</li>
  <li class="mahsulot">Telefon</li>
  <li class="mahsulot">Quloqlik</li>
</ul>

const mahsulotlar = document.querySelectorAll(".mahsulot");
console.log(mahsulotlar.length); // 3

querySelectorAll — NodeList qaytaradi, Array emas

Bu muhim farq. querySelectorAll — Array emas, NodeList qaytaradi. Ko'rinishi o'xshash, lekin Array metodlari — map, filter, reduce — NodeList da ishlamaydi.

const elementlar = document.querySelectorAll(".mahsulot");

elementlar.forEach(el => console.log(el.textContent)); // ✅ forEach ishlaydi

elementlar.map(el => el.textContent); // ❌ map ishlamaydi — NodeList da yo'q

Array metodlari kerak bo'lsa — NodeList ni Array ga o'girish kerak:

const elementlar = document.querySelectorAll(".mahsulot");

// Array ga o'girish
const massiv = Array.from(elementlar);
// yoki
const massiv = [...elementlar];

massiv.map(el => el.textContent); // ✅ endi map ishlaydi

Nima uchun NodeList, Array emas?

NodeList — "tirik" yoki "muzlatilgan" bo'lishi mumkin. querySelectorAll — muzlatilgan NodeList qaytaradi: sahifada yangi element qo'shilsa, NodeList o'zgarmaydi. Bu ko'p hollarda xavfsizroq. Array — oddiy JavaScript massivi, DOM bilan aloqasi yo'q.

Qidiruv doirasini toraytirish

document — butun sahifani qidiradi. Lekin ma'lum bir element ichidan ham qidirish mumkin:

const forma = document.querySelector(".login-forma");

// Faqat forma ichidagi inputlarni topish
const inputlar = forma.querySelectorAll("input");

// Faqat forma ichidagi birinchi tugmani topish
const tugma = forma.querySelector("button");

Nima uchun doirani toraytirish kerak?

Sahifada bir xil sinfli elementlar turli joylarda bo'lishi mumkin. document.querySelector(".tugma") — sahifadagi istalgan .tugma ni topadi. forma.querySelector(".tugma") — faqat forma ichidagisini topadi. Aniqlik va xatosizlik uchun.

Tez-tez uchraydigan xatolar

Topilmagan elementga murojaat:

querySelector va getElementById topilmasa null qaytaradi. Null ga xususiyat murojaat qilsangiz — xato.

const tugma = document.querySelector("#yoq-element");

tugma.addEventListener("click", fn); // ❌ TypeError: Cannot read properties of null

// ✅ — avval tekshirish
if (tugma) {
  tugma.addEventListener("click", fn);
}

NodeList da Array metodlarini ishlatish:

const elementlar = document.querySelectorAll("li");

// ❌ — NodeList da map yo'q
const matnlar = elementlar.map(el => el.textContent);

// ✅
const matnlar = [...elementlar].map(el => el.textContent);

ID ni # bilan getElementById ga berish:

// ❌ — getElementById faqat ID nomini oladi, # emas
document.getElementById("#mening-id"); // null qaytaradi

// ✅
document.getElementById("mening-id");

// querySelector da esa # kerak:
document.querySelector("#mening-id"); // ✅

Xulosa

getElementById("id") — ID bo'yicha bitta element. Eng tez. Topilmasa — null.

querySelector("selektor") — CSS selektor bo'yicha birinchi element. Har qanday selektor. Topilmasa — null.

querySelectorAll("selektor") — CSS selektor bo'yicha barcha elementlar. NodeList qaytaradi. Array metodlari kerak bo'lsa — [...elementlar] bilan Array ga o'girish.

Doirani toraytirish — document o'rniga ma'lum element ichidan qidirish. Aniqlik va xatosizlik uchun.

Keyingi dars

44-dars: DOM — createElement, appendChild, innerHTML, textContent