DOM — elementlarni tanlash va o'zgartirish

DarslarWeb dasturlash

DOM — elementlarni tanlash va o'zgartirish

getElementById, querySelector, innerHTML, innerText va boshqa DOM metodlari bilan sahifani boshqarish.

50 daqiqa
JavaScript — Dars 16

DOM — sahifa bilan muloqot

JS orqali HTML elementlarini topish, o'qish va o'zgartirish. Haqiqiy dinamik sahifalarga qadam.

documentquerySelectorinnerHTMLclassList

Dars rejasi

6 ta mavzu
  1. 01DOM nima?
  2. 02getElementById
  3. 03getElementsByClassName / TagName
  4. 04querySelector / querySelectorAll
  5. 05innerHTML, innerText, textContent
  6. 06Atribut va class bilan ishlash

1. DOM nima?

DOM (Document Object Model) — HTML sahifaning daraxt ko'rinishidagi JS obyekti. document — uning ildizi. Har bir teg — node.

1<!DOCTYPE html>
2<html>
3  <body>
4    <h1 id="sarlavha">Salom</h1>
5    <p class="matn">Birinchi</p>
6    <p class="matn">Ikkinchi</p>
7

8    <script>
9      console.log(document.title);
10      console.log(document.body);
11    </script>
12  </body>
13</html>

2. getElementById

Sahifada id unique bo'ladi. getElementById eng tezkor va aniq tanlov usuli.

1const sarlavha = document.getElementById("sarlavha");
2console.log(sarlavha);               // <h1>...</h1>
3console.log(sarlavha.innerText);     // "Salom"
4

5// O'zgartirish
6sarlavha.innerText = "Yangi sarlavha";
7sarlavha.style.color = "crimson";
8

9// Yo'q bo'lsa — null
10const yoq = document.getElementById("bor-emas");
11console.log(yoq);                    // null

3. getElementsByClassName / TagName

1// Bir xil class'dagi hamma element — HTMLCollection
2const matnlar = document.getElementsByClassName("matn");
3

4console.log(matnlar.length);         // 2
5console.log(matnlar[0].innerText);   // "Birinchi"
6

7// Aylanib chiqish
8for (let i = 0; i < matnlar.length; i++) {
9  matnlar[i].style.color = "blue";
10}
11

12// getElementsByTagName — teg bo'yicha
13const abzaslar = document.getElementsByTagName("p");
14const tugmalar = document.getElementsByTagName("button");
15

16console.log(abzaslar.length);

4. querySelector / querySelectorAll

CSS selektor sintaksisi bilan ishlaydi — zamonaviy va eng qulay usul.

1// querySelector — birinchi mos element (yoki null)
2document.querySelector("#sarlavha")      // id bo'yicha
3document.querySelector(".matn")          // class bo'yicha (birinchi)
4document.querySelector("p")              // teg bo'yicha
5document.querySelector("button.primary") // teg + class
6document.querySelector("ul li:first-child")
7

8// querySelectorAll — NodeList (hammasi)
9const hamma = document.querySelectorAll(".matn");
10hamma.forEach(el => el.style.color = "green");   // forEach ishlaydi!
11

12// Selektorni o'zgaruvchi bilan
13const selektor = "p.active";
14document.querySelector(selektor);

querySelector

Birinchi mos elementni qaytaradi yoki null.

querySelectorAll

NodeList qaytaradi. forEach va spread ishlaydi.

5. innerHTML, innerText, textContent

1const el = document.getElementById("box");
2

3// innerHTML — HTML bilan birga
4el.innerHTML = "<b>Qalin</b> va <i>qiya</i>";
5

6// innerText — faqat ko'rinadigan matn (teg renderlanmaydi)
7el.innerText = "<b>Qalin</b>";   // aynan shu matn chiqadi
8

9// textContent — barcha matn (yashirin ham), tezroq
10el.textContent = "Oddiy matn";
11

12// Qo'shish (almashtirmay)
13el.innerHTML += "<p>Yangi</p>";

6. Atribut va class bilan ishlash

1const el = document.querySelector("#tugma");
2

3// Atributlar
4el.getAttribute("href")
5el.setAttribute("disabled", "true")
6el.removeAttribute("disabled")
7el.hasAttribute("href")
8

9// Maxsus atributlar to'g'ridan-to'g'ri
10el.id = "yangi-id";
11el.href = "/home";
12el.value = "Matn";
13

14// classList — class bilan ishlash
15el.classList.add("active");
16el.classList.remove("hidden");
17el.classList.toggle("open");
18el.classList.contains("active");
19

20// style — inline stil (camelCase!)
21el.style.color = "red";
22el.style.backgroundColor = "yellow";
23el.style.fontSize = "20px";
DOM bilan jonli ishlash
Natijajonli

Kichik test

0 / 4

1.id bo'yicha eng tezkor tanlash usuli?

2.querySelectorAll nima qaytaradi?

3.HTML tegli matn qo'yish uchun?

4.Class qo'shish/olib tashlash uchun?

Mustaqil ish

0 / 5