Özet - DOM temelleri

querySelector ve textContent kullanarak bir profil kartındaki bilgileri güncellersin.

Özet - DOM temelleri

Bu grupta DOM'un ne olduğunu, öğe seçme yöntemlerini ve metin güncellemeyi öğrendin.

document nesnesi tüm sayfanın köküdür; getElementById id ile tek öğe seçer, querySelector CSS seçicisiyle ilk eşleşmeyi, querySelectorAll ise tüm eşleşmeleri NodeList olarak verir.

Seçilen öğenin metnini textContent ile okuyup yazabilirsin. Şimdi bunları bir profil kartında birleştirelim.

Uygulama Profil kartını güncelle

id'si "user-name" olan öğeyi querySelector ile seç ve userName değişkenine ata; userName.textContent'e "Ayşe" yaz. Aynı şekilde id'si "user-role" olan öğeyi seçip userRole'a ata ve userRole.textContent'e "Geliştirici" yaz.

Örnek çözümü göster

İki öğeyi de querySelector ile seç, sonra textContent ile güncelle.
Örnek çözüm:
const userName = document.querySelector("#user-name");
userName.textContent = "Ayşe";
const userRole = document.querySelector("#user-role");
userRole.textContent = "Geliştirici";

Uygulama Tüm görevleri tamamlandı işaretle

Sınıfı "task" olan tüm öğeleri querySelectorAll ile seç ve tasks değişkenine ata. for...of ile her öğeyi gez ve her birinin textContent'ine "Bitti" yaz.

Örnek çözümü göster

querySelectorAll('.task') ile seç, for (const task of tasks) ile gez, içeride task.textContent = 'Bitti' yaz.
Örnek çözüm:
const tasks = document.querySelectorAll(".task");
for (const task of tasks) {
  task.textContent = "Bitti";
}

Kendini test et

Sınıfı 'btn' olan ilk öğeyi seçen kod?
- getElementById(".btn")
- querySelector(".btn")
- querySelector("btn")
- getElementById("btn")
Cevabı göster

querySelector(".btn") — Doğru! querySelector sınıf seçicisi alır; . işaretiyle.

Metni oku ve güncelle

const title = document.querySelector(".title");
const old = title.____;
title.textContent = "Yeni";

Cevabı göster

const title = document.querySelector(".title");
const old = title.textContent;
title.textContent = "Yeni";

Sıradaki ders: createElement ile öğe oluşturma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler