JavaScript DOM: innerText, textContent ve innerHTML Kavramları

Element seçmeyi öğrendik. Şimdi seçtiğimiz elementlerin içeriğini okuma ve değiştirme zamanı!

JavaScript'te bir elementin içeriğiyle çalışmak için üç önemli özellik var:

innerText - Görünen metni al/değiştir
textContent - Tüm metni al/değiştir
innerHTML - HTML içeriğini al/değiştir

Bu üçü benzer görünse de önemli farkları var. Hadi inceleyelim!

innerText

innerText, bir elementin görünen metin içeriğini döndürür veya değiştirir.

Okuma

html

<h1 id="baslik">Merhaba Dünya!</h1>

javascript

const baslik = document.querySelector("#baslik");
console.log(baslik.innerText);  // "Merhaba Dünya!"

Yazma

javascript

baslik.innerText = "Hoş Geldiniz!";
// Artık sayfada "Hoş Geldiniz!" yazar

Önemli Özellik: Sadece Görüneni Alır

innerText gizli elementleri görmezden gelir:

html

<p id="mesaj">
    Görünen metin
    <span style="display: none;">Gizli metin</span>
</p>

javascript

const mesaj = document.querySelector("#mesaj");
console.log(mesaj.innerText);  // "Görünen metin"
// Gizli span'ı görmezden geldi!

textContent

textContent, bir elementin tüm metin içeriğini döndürür - gizli olsun ya da olmasın.

Okuma

html

<p id="mesaj">
    Görünen metin
    <span style="display: none;">Gizli metin</span>
</p>

javascript

const mesaj = document.querySelector("#mesaj");
console.log(mesaj.textContent);  // "Görünen metin Gizli metin"
// Gizli metni de aldı!

Yazma

javascript

mesaj.textContent = "Yeni içerik";
// Element içindeki her şey bu metinle değişti

innerText vs textContent Karşılaştırma

html

<div id="kutu">
    <p>Paragraf 1</p>
    <p style="display: none;">Gizli Paragraf</p>
    <p>Paragraf 2</p>
</div>

javascript

const kutu = document.querySelector("#kutu");

// innerText - sadece görüneni alır
console.log(kutu.innerText);
// "Paragraf 1
// Paragraf 2"

// textContent - her şeyi alır
console.log(kutu.textContent);
// "Paragraf 1
// Gizli Paragraf
// Paragraf 2"

Fark Tablosu

Özellik	innerText	textContent
Gizli elementler	❌ Dahil etmez	✅ Dahil eder
CSS'i dikkate alır	✅ Evet	❌ Hayır
Performans	Daha yavaş	Daha hızlı
Boşluklar	Normalize eder	Olduğu gibi bırakır

innerHTML

innerHTML, bir elementin HTML içeriğini döndürür veya değiştirir. Sadece metin değil, HTML etiketleri de dahil!

Okuma

html

<div id="kart">
    <h3>Başlık</h3>
    <p>Açıklama metni</p>
</div>

javascript

const kart = document.querySelector("#kart");

// innerText - sadece metin
console.log(kart.innerText);
// "Başlık
// Açıklama metni"

// innerHTML - HTML dahil
console.log(kart.innerHTML);
// "<h3>Başlık</h3>
//  <p>Açıklama metni</p>"

Yazma

innerHTML ile yeni HTML elementleri ekleyebilirsiniz:

javascript

kart.innerHTML = "<h2>Yeni Başlık</h2><p>Yeni açıklama</p>";

Sonuç: Div içeriği tamamen değişti, yeni h2 ve p elementleri oluştu.

innerText vs innerHTML Yazma Farkı

html

<h1 id="baslik">Eski Başlık</h1>

javascript

const baslik = document.querySelector("#baslik");

// innerText ile HTML yazmayı dene
baslik.innerText = "<em>Vurgulu</em> metin";
// Sonuç: Sayfada "<em>Vurgulu</em> metin" yazısı görünür (etiketler metin olarak)

// innerHTML ile HTML yaz
baslik.innerHTML = "<em>Vurgulu</em> metin";
// Sonuç: Sayfada "Vurgulu metin" görünür (Vurgulu kelimesi italik)

Üç Özelliğin Karşılaştırması

html

<div id="test">
    <p>Normal metin</p>
    <p style="display: none;">Gizli metin</p>
    <strong>Kalın metin</strong>
</div>

javascript

const test = document.querySelector("#test");

console.log(test.innerText);
// "Normal metin
// Kalın metin"

console.log(test.textContent);
// "Normal metin
// Gizli metin
// Kalın metin"

console.log(test.innerHTML);
// "<p>Normal metin</p>
//  <p style="display: none;">Gizli metin</p>
//  <strong>Kalın metin</strong>"

Özet Tablosu

Özellik	Ne Döndürür	HTML Etiketleri	Gizli İçerik
`innerText`	Görünen metin	❌ Dahil etmez	❌ Dahil etmez
`textContent`	Tüm metin	❌ Dahil etmez	✅ Dahil eder
`innerHTML`	HTML kodu	✅ Dahil eder	✅ Dahil eder

Pratik Örnekler

Örnek 1: Karşılama Mesajı

html

<h1 id="karsilama">Hoş Geldiniz!</h1>

javascript

const karsilama = document.querySelector("#karsilama");
const kullaniciAdi = "Ahmet";

karsilama.innerText = `Hoş Geldiniz, ${kullaniciAdi}!`;
// Sonuç: "Hoş Geldiniz, Ahmet!"

Örnek 2: Sayaç Uygulaması

html

<div class="sayac">
    <button id="azalt">-</button>
    <span id="deger">0</span>
    <button id="artir">+</button>
</div>

javascript

const degerSpan = document.querySelector("#deger");
let sayi = 0;

// Değeri oku
sayi = parseInt(degerSpan.innerText);  // 0

// Değeri güncelle
sayi++;
degerSpan.innerText = sayi;  // "1"

Örnek 3: Dinamik Liste Oluşturma

html

<ul id="gorevler"></ul>

javascript

const liste = document.querySelector("#gorevler");
const gorevler = ["Alışveriş yap", "Fatura öde", "Spor yap"];

// innerHTML ile liste oluştur
let html = "";
gorevler.forEach(gorev => {
    html += `<li>${gorev}</li>`;
});
liste.innerHTML = html;

// Sonuç:
// <ul id="gorevler">
//     <li>Alışveriş yap</li>
//     <li>Fatura öde</li>
//     <li>Spor yap</li>
// </ul>

Örnek 4: Kart Bileşeni

html

<div id="urun-kart"></div>

javascript

const kart = document.querySelector("#urun-kart");

const urun = {
    ad: "Laptop",
    fiyat: 15000,
    stok: true
};

kart.innerHTML = `
    <h3>${urun.ad}</h3>
    <p class="fiyat">${urun.fiyat} TL</p>
    <span class="stok ${urun.stok ? 'var' : 'yok'}">
        ${urun.stok ? 'Stokta Var' : 'Stokta Yok'}
    </span>
`;

Örnek 5: İçeriğe Ekleme (+=)

Mevcut içeriğin sonuna eklemek için += kullanabilirsiniz:

html

<ul id="mesajlar">
    <li>İlk mesaj</li>
</ul>

javascript

const mesajlar = document.querySelector("#mesajlar");

// Sonuna yeni mesaj ekle
mesajlar.innerHTML += "<li>İkinci mesaj</li>";
mesajlar.innerHTML += "<li>Üçüncü mesaj</li>";

// Sonuç:
// <ul id="mesajlar">
//     <li>İlk mesaj</li>
//     <li>İkinci mesaj</li>
//     <li>Üçüncü mesaj</li>
// </ul>

Örnek 6: Form Değerini Gösterme

html

<input type="text" id="isim-input" placeholder="Adınızı girin">
<button id="goster-btn">Göster</button>
<p id="sonuc"></p>

javascript

const input = document.querySelector("#isim-input");
const buton = document.querySelector("#goster-btn");
const sonuc = document.querySelector("#sonuc");

buton.addEventListener("click", function() {
    const isim = input.value;
    sonuc.innerHTML = `Merhaba, <strong>${isim}</strong>!`;
});

Örnek 7: Tüm Linklerin Metnini Değiştirme

html

<nav>
    <a href="/ana-sayfa">Ana Sayfa</a>
    <a href="/hakkimizda">Hakkımızda</a>
    <a href="/iletisim">İletişim</a>
</nav>

javascript

const linkler = document.querySelectorAll("nav a");

linkler.forEach((link, index) => {
    link.innerText = `Menü ${index + 1}`;
});

// Sonuç: "Menü 1", "Menü 2", "Menü 3"

innerHTML Güvenlik Uyarısı

innerHTML kullanırken dikkatli olun! Kullanıcıdan gelen veriyi doğrudan innerHTML'e koymak güvenlik açığı oluşturabilir (XSS - Cross-Site Scripting).

Tehlikeli Kullanım

javascript

// ❌ TEHLİKELİ! Kullanıcı kötü amaçlı kod girebilir
const kullaniciGirdisi = "<script>alert('Hack!')</script>";
element.innerHTML = kullaniciGirdisi;

Güvenli Kullanım

javascript

// ✅ GÜVENLİ - textContent HTML'i çalıştırmaz
element.textContent = kullaniciGirdisi;
// Script etiketi metin olarak görünür, çalışmaz

// ✅ GÜVENLİ - Girdiyi temizle
function temizle(metin) {
    const div = document.createElement('div');
    div.textContent = metin;
    return div.innerHTML;
}
element.innerHTML = temizle(kullaniciGirdisi);

Kural

Durum	Kullanılacak Özellik
Kullanıcı girdisi	`textContent` veya `innerText`
Güvenilir kaynak	`innerHTML` kullanılabilir
Kendi yazdığınız HTML	`innerHTML` kullanılabilir

İçeriği Tamamen Silme

Bir elementin içeriğini silmek için boş string atayın:

javascript

const kutu = document.querySelector("#kutu");

// İçeriği sil
kutu.innerHTML = "";
// veya
kutu.textContent = "";
// veya
kutu.innerText = "";

Hangisini Kullanmalı?

innerText Kullan

Sadece görünen metni almak/değiştirmek istiyorsan
CSS stillerinin etkisini dikkate almak istiyorsan

javascript

// Kullanıcının gördüğü metni al
const gorunenMetin = element.innerText;

textContent Kullan

Tüm metni almak istiyorsan (gizli dahil)
Performans önemliyse (daha hızlı)
Güvenlik önemliyse (kullanıcı girdisi)

javascript

// Güvenli metin atama
element.textContent = kullaniciGirdisi;

innerHTML Kullan

HTML içeriği eklemek/değiştirmek istiyorsan
Dinamik olarak yeni elementler oluşturmak istiyorsan
Kaynak güvenilir ise

javascript

// HTML içerik ekleme
element.innerHTML = "<strong>Kalın</strong> ve <em>italik</em>";

Özet

javascript

const element = document.querySelector("#element");

// OKUMA
element.innerText;    // Görünen metin
element.textContent;  // Tüm metin (gizli dahil)
element.innerHTML;    // HTML kodu

// YAZMA
element.innerText = "Yeni metin";           // Metin olarak yazar
element.textContent = "Yeni metin";         // Metin olarak yazar
element.innerHTML = "<b>HTML</b> içerik";   // HTML olarak yorumlar

// EKLEME
element.innerHTML += "<p>Yeni paragraf</p>";

// SİLME
element.innerHTML = "";

Özellik	Okuma	Yazma	HTML Desteği
`innerText`	Görünen metin	Metin olarak	❌
`textContent`	Tüm metin	Metin olarak	❌
`innerHTML`	HTML kodu	HTML olarak	✅

Sırada Ne Var?

Element seçmeyi ve içerik değiştirmeyi öğrendik. Peki elementlerin özelliklerini (attributes) nasıl okur ve değiştiririz?

Bir sonraki makalede HTML Attributes konusunu öğreneceğiz - src, href, class, id gibi özellikleri JavaScript ile manipüle etme.

JavaScript DOM: innerText, textContent ve innerHTML Kavramları

innerText

Okuma

Yazma

Önemli Özellik: Sadece Görüneni Alır

textContent

Okuma

Yazma

innerText vs textContent Karşılaştırma

Fark Tablosu

innerHTML

Okuma

Yazma

innerText vs innerHTML Yazma Farkı

Üç Özelliğin Karşılaştırması

Özet Tablosu

Pratik Örnekler

Örnek 1: Karşılama Mesajı

Örnek 2: Sayaç Uygulaması

Örnek 3: Dinamik Liste Oluşturma

Örnek 4: Kart Bileşeni

Örnek 5: İçeriğe Ekleme (+=)

Örnek 6: Form Değerini Gösterme

Örnek 7: Tüm Linklerin Metnini Değiştirme

innerHTML Güvenlik Uyarısı

Tehlikeli Kullanım

Güvenli Kullanım

Kural

İçeriği Tamamen Silme

Hangisini Kullanmalı?

innerText Kullan

textContent Kullan

innerHTML Kullan

Özet

Sırada Ne Var?

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

innerText

Okuma

Yazma

Önemli Özellik: Sadece Görüneni Alır

textContent

Okuma

Yazma

innerText vs textContent Karşılaştırma

Fark Tablosu

innerHTML

Okuma

Yazma

innerText vs innerHTML Yazma Farkı

Üç Özelliğin Karşılaştırması

Özet Tablosu

Pratik Örnekler

Örnek 1: Karşılama Mesajı

Örnek 2: Sayaç Uygulaması

Örnek 3: Dinamik Liste Oluşturma

Örnek 4: Kart Bileşeni

Örnek 5: İçeriğe Ekleme (+=)

Örnek 6: Form Değerini Gösterme

Örnek 7: Tüm Linklerin Metnini Değiştirme

innerHTML Güvenlik Uyarısı

Tehlikeli Kullanım

Güvenli Kullanım

Kural

İçeriği Tamamen Silme

Hangisini Kullanmalı?

innerText Kullan

textContent Kullan

innerHTML Kullan

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword