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.

Sıradaki ders: Özet - DOM temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler