DOM: element matni va uslubini o'zgartirish

Elementni topgach, uni o’zgartirish mumkin: matnini almashtirish, uslub berish, klass qo’shish. Natija ekranda darhol ko’rinadi.

Matnni o’zgartirish

JavaScript

const h = document.querySelector("#sarlavha");

console.log(h.textContent);

h.textContent = "Yangi matn";
console.log(h.textContent);

Sahifa

Natija oynasida sarlavha o’zgarganini ko’rasiz.

textContent va innerHTML

Element topish yo’llari DOM nima darsida ko’rilgan; bu yerda topilgan elementga matn yozishni ko’ramiz:

JavaScript

const a = document.querySelector("#a");
const b = document.querySelector("#b");

a.textContent = "<strong>Qalin?</strong>";
b.innerHTML = "<strong>Qalin!</strong>";

console.log("textContent:", a.textContent);
console.log("innerHTML:", b.innerHTML);

Sahifa

textContent — HTML teglarini matn deb qabul qiladi va shundayligicha ko’rsatadi;
innerHTML — teglarni HTML deb o’qiydi va qo’llaydi.

Uslubni o’zgartirish

JavaScript

const p = document.querySelector("#text");

p.style.color = "crimson";
p.style.fontSize = "20px";
p.style.fontWeight = "bold";

console.log(p.style.color);

Sahifa

CSS xossalari camelCase ko’rinishida yoziladi: font-size → fontSize, background-color → backgroundColor.

classList — klasslarni boshqarish

Uslubni to’g’ridan-to’g’ri berish o’rniga CSS klassini qo’shish afzalroq:

JavaScript

const p = document.querySelector("#text");

p.classList.add("aktiv");
console.log(p.className);

p.classList.remove("aktiv");
console.log("olib tashlandi:", p.className);

p.classList.add("aktiv");
console.log("bormi:", p.classList.contains("aktiv"));

Sahifa

Metod	Vazifasi
`add()`	klass qo’shadi
`remove()`	olib tashlaydi
`toggle()`	bor bo’lsa olib tashlaydi, yo’q bo’lsa qo’shadi
`contains()`	bor-yo’qligini tekshiradi

Atributlar

JavaScript

const a = document.querySelector("#havola");

console.log(a.getAttribute("href"));

a.setAttribute("href", "/javascript/dom-nima");
a.textContent = "DOM darsi";
console.log(a.getAttribute("href"));

const img = document.querySelector("#rasm");
img.setAttribute("alt", "Namuna rasm");
console.log(img.alt);

Sahifa

Ko’p ishlatiladigan atributlarga to’g’ridan-to’g’ri ham murojaat qilinadi: a.href, img.src, input.value.

Yangi element yaratish

JavaScript

const ul = document.querySelector("#list");

const li = document.createElement("li");
li.textContent = "Ikkinchi";
ul.appendChild(li);

const third = document.createElement("li");
third.textContent = "Uchinchi";
third.style.color = "green";
ul.appendChild(third);

console.log("Elementlar:", ul.children.length);

Sahifa

Uch qadam: createElement bilan yaratish → mazmun berish → appendChild bilan daraxtga qo’shish. Qo’shilmaguncha element ekranda ko’rinmaydi.

Elementni o’chirish

JavaScript

const ul = document.querySelector("#list");
console.log("Oldin:", ul.children.length);

ul.lastElementChild.remove();
console.log("Keyin:", ul.children.length);

Sahifa

Amaliy mashq

Sahifani o’zgartiring:

Runner’ga sarlavha qo’shib, matnini almashtiring;
style bilan rangini va o’lchamini o’zgartiring;
CSS klassi yaratib, classList.add bilan qo’llang;
toggle ni ikki marta chaqiring — natija qanday o’zgardi?
createElement bilan uchta yangi element yasab, ro’yxatga qo’shing;
textContent va innerHTML ga bir xil HTML matn bering va farqini ko’ring.

Qisqacha xulosa

textContent — matn sifatida; innerHTML — HTML sifatida (foydalanuvchi ma’lumoti uchun ishlatilmaydi).
style.xossa — uslub berish, CSS nomlari camelCase da.
classList — add, remove, toggle, contains.
getAttribute/setAttribute — atributlar bilan ishlash.
createElement + appendChild — yangi element; remove() — o’chirish.

Keyingi darsda hodisalar — foydalanuvchi harakatiga javob berishni ko’ramiz.