Ö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";