textContent ve innerText
Bir öğenin metnini okumayı ve değiştirmeyi öğrenirsin.
textContent ile metin oku ve yaz
Bir öğenin metnini okumak veya değiştirmek için textContent özelliği kullanılır. Bu özellik hem okunabilir hem de yazılabilirdir.
Okuma: const text = heading.textContent; öğenin içindeki metni verir.
Yazma: heading.textContent = "Yeni başlık"; öğenin metnini değiştirir; eski içeriğin tamamı silinir.
textContent verilen metni ham metin olarak işler; HTML etiketleri yorumlanmaz. Bu yüzden güvenlidir.
innerText ne zaman farklıdır?
innerText de bir öğenin metnini verir; ancak textContent'ten bazı farkları vardır.
innerText, display: none ile gizlenmiş öğelerin metnini saymaz; tarayıcının görsel düzenini hesaba katar. textContent ise gizli öğeler dahil tüm metni verir.
Ayrıca innerText performansı daha düşüktür çünkü düzen hesaplaması yapar. Çoğu durumda textContent tercih edilir.
Uygulama Durum metnini güncelle
id'si "status" olan öğeyi querySelector ile seç ve statusEl değişkenine ata. Sonra statusEl.textContent'e "Yüklendi" yaz.
Örnek çözümü göster
querySelector('#status') ile seç, sonra statusEl.textContent = 'Yüklendi' yaz.
Örnek çözüm:
const statusEl = document.querySelector("#status");
statusEl.textContent = "Yüklendi";Kendini test et
-
Bir öğenin metnini değiştirmek için?
- heading.textContent()
- heading.text = "..."
- heading.setValue("...")
- heading.textContent = "..."
Cevabı göster
heading.textContent = "..." — Doğru! textContent bir özelliktir; = ile değer atanır.
-
Metni güncelle
const status = document.querySelector("#status"); status.____ = "Hazır";Cevabı göster
const status = document.querySelector("#status"); status.textContent = "Hazır"; -
Özelliği davranışıyla eşle
- textContent
- tüm metni verir, güvenli
- innerText
- görünür metni verir, düzen hesaplar
- innerHTML
- HTML olarak yorumlar, riskli
- document.title
- sayfanın başlığı
-
textContent neden daha güvenlidir?
- HTML etiketlerini metin olarak işler, yorumlamaz
- Sunucuyla iletişimi şifreler
- Daha kısa yazılır
- Sayfayı otomatik yeniler
Cevabı göster
HTML etiketlerini metin olarak işler, yorumlamaz — Doğru! textContent HTML'i metin olarak işler; etiketler yorumlanmaz.