JavaScript’te innerText ve innerHTML Kullanarak DOM Manipülasyonu

,

, vb.) temsil eder.
* Metin (Text) Düğümleri: Elementlerin içindeki saf metni temsil eder.
* Öznitelik (Attribute) Düğümleri: Elementlerin özniteliklerini (href, src, class vb.) temsil eder.

JavaScript, bu nesneler ve düğümler aracılığıyla DOM ile etkileşime girer. document.getElementById(), document.querySelector() gibi metotlar belirli elementlere erişmek için kullanılırken, innerText ve innerHTML gibi özellikler bu elementlerin içeriğini okumak veya değiştirmek için kullanılır.

innerText Özelliği

innerText özelliği, bir HTML elementinin “görünür” metin içeriğini temsil eder. Yani, kullanıcı tarafından tarayıcıda görünen metni döndürür veya ayarlar. Bu özellik, elementin içindeki tüm HTML etiketlerini göz ardı eder ve yalnızca metin içeriğini dikkate alır.

innerText’in Kullanımı

Bir elementin metin içeriğini okuma:
Bir elementin mevcut metin içeriğini almak için innerText özelliğini kullanabilirsiniz.

// HTML yapısı: 
Merhaba Dünya!
let paragraf = document.getElementById('mesaj');
let metin = paragraf.innerText;
console.log(metin); // Çıktı: "Merhaba Dünya!"

Bir elementin metin içeriğini değiştirme:
Bir elementin metin içeriğini değiştirmek için innerText özelliğine yeni bir dize atayabilirsiniz.

// HTML yapısı: 
Eski bilgi
let bilgiDiv = document.getElementById('bilgi');
bilgiDiv.innerText = 'Yeni ve güncel bilgi.';
// Artık div içeriği: 
Yeni ve güncel bilgi.

Eğer atadığınız dize HTML etiketleri içeriyorsa, innerText bu etiketleri metin olarak işler ve tarayıcıda doğrudan görüntüler.

// HTML yapısı: 
let uyariSpan = document.getElementById('uyari');
uyariSpan.innerText = 'Dikkat: Bu bir uyarıdır.';
// Artık span içeriği: <strong>Dikkat:</strong> Bu bir uyarıdır.
// Tarayıcıda: Dikkat: Bu bir uyarıdır. şeklinde görünür.

Görüldüğü gibi, innerText HTML etiketlerini otomatik olarak kaçırır (escape eder), yani onları özel karakterlere dönüştürür (< -> <, > -> >). Bu, güvenlik açısından önemli bir özelliktir.

innerText'in Özellikleri ve Davranışları

* Görünür Metin Odaklılık: innerText, bir elementin kullanıcı tarafından görünen metin içeriğini döndürür. Bu, CSS ile display: none; veya visibility: hidden; gibi stillerle gizlenmiş metinleri içermeyeceği anlamına gelir.

// HTML yapısı:
    // 

    //   
Görünür metin.
    //   Gizli metin.
    // 
    let kapsayici = document.getElementById('kapsayici');
    console.log(kapsayici.innerText); // Çıktı: "Görünür metin." (Gizli metin dahil edilmez)

* Stil Hesaplaması: innerText değeri alınırken tarayıcı, elementin nihai hesaplanmış stilini dikkate alır. Bu, DOM'un yeniden düzenlenmesini (reflow) tetikleyebilir ve büyük veya karmaşık DOM ağaçlarında performans düşüşüne neden olabilir.
* Boşluk ve Satır Sonu Karakterleri: innerText, metin içeriğindeki boşlukları ve satır sonu karakterlerini genellikle tarayıcının görüntüleme şekline uygun olarak korur. Örneğin, birden fazla boşluk tek bir boşluğa indirgenebilir (CSS white-space özelliğine bağlı olarak).
* Güvenlik: innerText özelliği, içerisine atanan tüm HTML etiketlerini metin olarak işlediği için XSS (Cross-Site Scripting) saldırılarına karşı doğal bir koruma sağlar. Kullanıcıdan gelen verileri güvenli bir şekilde görüntülemek için idealdir.

innerText'in Avantajları

* Güvenlik: XSS saldırılarına karşı doğal koruma sağlar. Kullanıcı tarafından girilen verileri güvenli bir şekilde görüntülemek için en iyi seçenektir.
* Basitlik: Sadece metin içeriğiyle ilgileniyorsanız kullanımı son derece basittir.
* Görünürlük: Yalnızca kullanıcının gördüğü metni döndürdüğü için, sayfanın mevcut görsel durumunu yansıtır.

innerText'in Dezavantajları

* HTML Ekleme Kısıtlaması: HTML etiketlerini metin olarak işlediği için, dinamik olarak HTML yapıları oluşturmak veya zengin metin içeriği eklemek için kullanılamaz.
* Performans: Değerini alırken tarayıcının stil hesaplaması yapması gerektiği için, özellikle büyük DOM ağaçlarında veya sıkça çağrıldığında performans düşüşüne neden olabilir. Bu, reflow ve repaint işlemlerini tetikler.

innerHTML Özelliği

innerHTML özelliği, bir HTML elementinin "iç HTML" içeriğini temsil eder. Yani, elementin başlangıç ve bitiş etiketleri arasındaki tüm HTML işaretlemesini (etiketler, metin, yorumlar vb.) döndürür veya ayarlar. Bu özellik, dinamik olarak karmaşık HTML yapıları oluşturmak veya mevcut bir elementin içeriğini tamamen değiştirmek için kullanılır.

innerHTML'in Kullanımı

Bir elementin HTML içeriğini okuma:
Bir elementin mevcut HTML içeriğini almak için innerHTML özelliğini kullanabilirsiniz.

// HTML yapısı: 
Öğe 1
Öğe 2
let listeDiv = document.getElementById('liste');
let htmlIcerik = listeDiv.innerHTML;
console.log(htmlIcerik); // Çıktı: "
Öğe 1
Öğe 2
"

Bir elementin HTML içeriğini değiştirme:
Bir elementin HTML içeriğini değiştirmek veya yeni HTML eklemek için innerHTML özelliğine bir HTML dizesi atayabilirsiniz.

// HTML yapısı: 
Eski içerik
let icerikDiv = document.getElementById('icerik');
icerikDiv.innerHTML = '
Bu yeni bir paragraftır.
';
// Artık div içeriği: 
Bu yeni bir paragraftır.

Bu örnekte, icerikDiv'in tüm eski içeriği silinir ve yerine yeni

etiketi ve içindeki metin yerleştirilir. Tarayıcı, atanan HTML dizesini ayrıştırır ve ilgili DOM düğümlerini oluşturur.

Mevcut içeriğe ekleme yapma:
innerHTML mevcut içeriği tamamen değiştirdiği için, mevcut içeriğe ekleme yapmak istiyorsanız, mevcut innerHTML değerini alıp yeni içeriği buna ekleyip tekrar atamanız gerekir.

// HTML yapısı: 
Mevcut Öğe
let liste = document.getElementById('liste');
liste.innerHTML += '
Yeni Öğe
';
// Artık liste içeriği: 
Mevcut Öğe
Yeni Öğe

Ancak, bu yaklaşım (mevcut innerHTML'i alıp üzerine ekleyip tekrar atama) büyük DOM yapıları için performans sorunlarına yol açabilir, çünkü her atamada tarayıcı tüm içeriği yeniden ayrıştırır ve DOM'u yeniden oluşturur. Bu tür durumlarda insertAdjacentHTML veya DOM API'lerini kullanmak daha verimlidir.

innerHTML'in Özellikleri ve Davranışları

* HTML Ayrıştırma: innerHTML'e bir dize atandığında, tarayıcı bu dizeyi HTML olarak ayrıştırır ve ortaya çıkan DOM düğümlerini hedef elementin içine yerleştirir. Bu işlem, mevcut tüm çocuk düğümlerinin kaldırılması ve yenilerinin oluşturulması anlamına gelir.
* Güvenlik Riski (XSS): innerHTML, atanan dizeyi HTML olarak yorumladığı için, kötü niyetli kullanıcı girdileriyle kullanıldığında XSS saldırılarına kapı açabilir. Eğer kullanıcıdan gelen ve güvenilmeyen bir dizeyi doğrudan innerHTML'e atarsanız, bu dize içindeki etiketleri veya olay işleyicileri çalıştırılabilir.
* Performans: innerHTML'in performansı, atanan HTML dizesinin boyutuna ve karmaşıklığına bağlıdır. Küçük, basit HTML blokları için hızlı olabilirken, çok büyük ve karmaşık HTML blokları için DOM'u yeniden ayrıştırma ve oluşturma maliyeti yüksek olabilir. Ancak innerText gibi stil hesaplaması yapmadığı için bazı durumlarda daha hızlı olabilir.

innerHTML'in Avantajları

* Zengin İçerik Ekleme: Metinle birlikte HTML etiketleri, resimler, bağlantılar ve diğer tüm HTML yapılarını dinamik olarak eklemenizi sağlar.
* Kolaylık: Özellikle küçük ve orta ölçekli HTML bloklarını hızlıca oluşturmak veya değiştirmek için pratik bir yöntemdir.
* Tüm İçeriği Değiştirme: Bir elementin tüm içeriğini tek bir işlemle tamamen değiştirmek istediğinizde kullanışlıdır.

innerHTML'in Dezavantajları

* Güvenlik Açığı (XSS): En büyük dezavantajı, güvenilmeyen kaynaklardan gelen verilerle kullanıldığında XSS saldırılarına karşı savunmasız olmasıdır.
* Mevcut İçeriği Silme: innerHTML'e atama yaptığınızda, elementin içindeki tüm mevcut içerik (metin, diğer elementler, olay dinleyicileri) tamamen silinir ve yerine yeni içerik gelir. Bu, özellikle mevcut olay dinleyicilerini kaybetmenize neden olabilir.
* Performans (Büyük Değişiklikler İçin): Mevcut içeriğe ekleme yapmak için innerHTML += ... kullanmak, her seferinde tüm DOM ağacının yeniden ayrıştırılmasına ve oluşturulmasına yol açtığı için verimsizdir.

innerText ve innerHTML Arasındaki Temel Farklar

Bu iki özellik arasındaki temel farkları özetleyelim:

| Özellik | innerText | innerHTML |
| :---------------- | :------------------------------------------ | :------------------------------------------------- |
| İçerik Türü | Yalnızca metin içeriği | HTML işaretlemesi (etiketler dahil) |
| Güvenlik | XSS'e karşı güvenli (HTML'i kaçırır) | XSS riski taşır (HTML'i ayrıştırır ve çalıştırır) |
| Görünürlük | Sadece görünür metni döndürur (CSS etkisi) | Gizli HTML'i de döndürür (CSS etkisi yok) |
| Stil Hesaplama | Evet, stil hesaplamalarını tetikler | Hayır, stil hesaplamalarını tetiklemez |
| Boşluk İşleme | Tarayıcının render şekline göre boşlukları işler | HTML'deki boşlukları olduğu gibi korur |
| Performans | Stil hesaplamaları nedeniyle yavaş olabilir | Ayrıştırma maliyeti nedeniyle yavaş olabilir (özellikle büyük bloklar için) |
| Kullanım Amacı| Sadece metin okuma/yazma | Zengin HTML içeriği okuma/yazma |

Hangi Durumda Hangisini Kullanmalıyız?

Doğru aracı doğru yerde kullanmak, hem uygulamanızın güvenliği hem de performansı için hayati öneme sahiptir.

innerText Kullanım Senaryoları:

* Güvenli Metin Görüntüleme: Kullanıcıdan alınan veya güvenilmeyen bir kaynaktan gelen metin verilerini bir sayfada göstermeniz gerektiğinde, innerText güvenlik nedeniyle her zaman tercih edilmelidir. Bu, olası XSS saldırılarını önler.

let userInput = "Merhaba!";
    document.getElementById('mesaj').innerText = userInput; // Güvenli: Script çalışmaz, metin olarak görünür.

* Sadece Metin İçeriğini Güncelleme: Bir elementin içindeki metni değiştirmek istediğinizde ve bu metnin içinde herhangi bir HTML etiketi olmasını beklemediğinizde.

document.getElementById('sayac').innerText = Kalan süre: ${saniye} saniye;

* Bir Elementin Görünür Metnini Sorgulama: Bir elementin kullanıcı tarafından görünen metin içeriğini almak istediğinizde.

let baslikMetni = document.getElementById('baslik').innerText;
    if (baslikMetni.includes('Önemli')) {
        // ...
    }

innerHTML Kullanım Senaryoları:

* Dinamik Olarak Karmaşık HTML Yapıları Oluşturma: Sunucudan gelen veya JavaScript'te oluşturulan zengin HTML içeriğini bir sayfaya eklemeniz gerektiğinde.

let urunler = [
        { ad: "Laptop", fiyat: 1200 },
        { ad: "Mouse", fiyat: 25 }
    ];
    let urunListesiHTML = '
';
    urunler.forEach(urun => {
        urunListesiHTML += 
${urun.ad} - ${urun.fiyat} TL;
    });
    urunListesiHTML += '
';
    document.getElementById('urunler').innerHTML = urunListesiHTML;

* Sunucudan Gelen Güvenilir HTML İçeriğini Gösterme: Eğer sunucudan gelen HTML içeriğinin güvenli olduğundan eminseniz (yani, kötü niyetli kod içermediğinden), innerHTML kullanabilirsiniz. Ancak bu güvenliği sağlamak sunucunun sorumluluğundadır.
* Bir Elementin İçindeki Tüm İçeriği Sıfırlama ve Yeniden Doldurma: Bir elementin içindeki tüm mevcut DOM yapısını kaldırıp yerine tamamen yeni bir yapı koymak istediğinizde.

document.getElementById('tablo').innerHTML = 'AdYaş' +
                                                'Ali30';

Güvenlik Endişeleri: XSS ve innerHTML

Cross-Site Scripting (XSS), web uygulamalarında sıkça rastlanan bir güvenlik açığıdır. Kötü niyetli kullanıcılar, web sayfalarına zararlı istemci tarafı komut dosyaları (genellikle JavaScript) enjekte ederek diğer kullanıcıların tarayıcılarında bu komut dosyalarının çalışmasını sağlar. Bu, oturum çerezlerinin çalınması, hassas verilerin ele geçirilmesi veya web sitesinin görünümünün değiştirilmesi gibi ciddi sonuçlara yol açabilir.

innerHTML özelliği, eğer dikkatli kullanılmazsa XSS saldırıları için potansiyel bir vektör oluşturur. Örneğin:

let kullaniciYorumu = "";
document.getElementById('yorumAlani').innerHTML = kullaniciYorumu;
// Tarayıcı, geçersiz resim yüklemeye çalışacak ve onerror olayında alert() çalışacaktır.

Bu örnekte, onerror olay işleyicisi kötü niyetli kodu çalıştırır. Daha karmaşık saldırılar, document.cookie'yi bir saldırganın sunucusuna gönderebilir veya DOM'u manipüle ederek kullanıcıyı yanıltabilir.

Korunma Yöntemleri:

1. Asla Güvenilmeyen Kullanıcı Girdilerini Doğrudan innerHTML'e Aktarmayın: Bu, altın kuraldır. Kullanıcıdan gelen herhangi bir veriyi (yorumlar, profil bilgileri vb.) innerHTML ile sayfaya eklemeden önce daima işleme tabi tutun.
2. Sanitizasyon (Temizleme): Eğer kullanıcıların zengin metin (HTML) girmesine izin vermeniz gerekiyorsa, girdiyi güvenli bir şekilde temizlemeniz (sanitizasyon) şarttır. Bu, yalnızca izin verilen HTML etiketlerini ve özniteliklerini bırakıp diğer tüm potansiyel olarak zararlı etiketleri veya öznitelikleri kaldırma işlemidir.
* Kütüphaneler Kullanın: DOMPurify gibi güvenlik odaklı, iyi test edilmiş kütüphaneler bu işi sizin için yapar. Kendi sanitizasyon fonksiyonunuzu yazmak oldukça zordur ve genellikle güvenlik açıklarına yol açar.

// DOMPurify ile sanitizasyon örneği
    // let temizlenmisHTML = DOMPurify.sanitize(kullaniciGirdisi);
    // document.getElementById('yorumAlani').innerHTML = temizlenmisHTML;

3. innerText veya textContent Kullanın: Eğer sadece metin içeriği göstermeniz gerekiyorsa, innerText veya textContent kullanın. Bu özellikler HTML etiketlerini otomatik olarak kaçırdığı için XSS'e karşı doğal olarak güvenlidir.
4. DOM API'lerini Kullanın: Yeni elementler oluşturmak için document.createElement(), metin düğümleri için document.createTextNode() ve bunları DOM'a eklemek için appendChild() veya insertBefore() gibi yöntemleri kullanmak, innerHTML'den daha güvenli ve genellikle daha performanslı bir yaklaşımdır (özellikle küçük, parçalı eklemeler için).

let guvenliMetin = "Merhaba Dünya!";
let p = document.createElement('p');
let strong = document.createElement('strong');
strong.textContent = "Merhaba"; // textContent veya innerText kullanın
p.appendChild(strong);
p.appendChild(document.createTextNode(" Dünya!"));
document.getElementById('guvenliAlan').appendChild(p);
// Bu yaklaşım, HTML'i manuel olarak oluşturup metni güvenli bir şekilde ekler.

Performans Mülahazaları

DOM manipülasyonu, tarayıcının en pahalı işlemlerinden biri olabilir. Her DOM değişikliği, tarayıcının sayfanın düzenini yeniden hesaplamasına (reflow/layout) ve/veya yeniden çizmesine (repaint) neden olabilir. Bu işlemler, özellikle büyük veya karmaşık sayfalarda, kullanıcının algıladığı performansı önemli ölçüde etkileyebilir.

* innerText ve Reflow/Repaint: innerText değeri alınırken veya ayarlanırken, tarayıcı elementin ve alt elementlerinin hesaplanmış stilini dikkate almak zorundadır. Bu, bir reflow ve repaint işlemini tetikleyebilir. Sık sık innerText okuma veya yazma işlemleri, özellikle döngüler içinde yapıldığında, ciddi performans sorunlarına yol açabilir.
* innerHTML ve Ayrıştırma Maliyeti: innerHTML'e bir dize atandığında, tarayıcı bu dizeyi HTML olarak ayrıştırır, tüm mevcut çocuk düğümlerini kaldırır ve yeni düğümleri oluşturur. Bu işlem, atanan HTML dizesinin büyüklüğüne ve karmaşıklığına bağlı olarak maliyetli olabilir. Eğer innerHTML += ... gibi bir yapıyla sürekli ekleme yapılıyorsa, her seferinde tüm elementin içeriği yeniden ayrıştırılıp oluşturulduğu için performans çok düşer.

Performans İpuçları:

1. Manipülasyonları Gruplayın: DOM manipülasyonlarını mümkün olduğunca tek bir toplu işlemde yapın. Örneğin, bir döngü içinde her öğe için ayrı ayrı DOM'u güncellemek yerine, tüm değişiklikleri hafızada oluşturup tek seferde DOM'a ekleyin.
2. DocumentFragment Kullanın: Birden fazla DOM düğümü oluşturup bunları tek seferde DOM'a eklemek için DocumentFragment kullanın. Bu, her bir düğüm eklemede reflow/repaint tetiklenmesini önler.

let fragment = document.createDocumentFragment();
    for (let i = 0; i < 100; i++) {
        let li = document.createElement('li');
        li.textContent = Öğe ${i + 1};
        fragment.appendChild(li);
    }
    document.getElementById('buyukListe').appendChild(fragment); // Tek bir reflow/repaint

3. Elementi DOM'dan Ayırın: Büyük DOM manipülasyonları yapmadan önce, ilgili elementi DOM'dan geçici olarak kaldırın, değişiklikleri yapın ve sonra tekrar ekleyin.

let liste = document.getElementById('liste');
    let ebeveyn = liste.parentNode;
    ebeveyn.removeChild(liste); // DOM'dan kaldır
    // Büyük değişiklikler yapın (örneğin, innerHTML ile)
    liste.innerHTML = '... yeni ve büyük içerik ...';
    ebeveyn.appendChild(liste); // DOM'a geri ekle

4. textContent Kullanın (Metin İçin): Eğer sadece metin içeriğiyle çalışıyorsanız ve innerText'in stil hesaplama davranışına ihtiyacınız yoksa, textContent genellikle daha performanslı bir alternatiftir çünkü stil hesaplamalarını tetiklemez ve gizli içeriği de döndürür.

Alternatif Yaklaşımlar

innerText ve innerHTML güçlü araçlar olsa da, bazen daha spesifik veya performanslı alternatiflere ihtiyaç duyulabilir.

* textContent: innerText'e benzer şekilde, bir elementin metin içeriğini döndürür veya ayarlar. Ancak innerText'ten farklı olarak:
* Stil hesaplaması yapmaz, bu nedenle genellikle daha performanslıdır.
* CSS ile gizlenmiş içeriği de döndürür.
* HTML etiketlerini kaçırır (metin olarak işler), dolayısıyla XSS'e karşı güvenlidir.
* Çoğu durumda innerText yerine textContent kullanmak daha iyi bir performans ve güvenlik dengesi sağlayabilir, özellikle sadece metin içeriğiyle ilgileniyorsanız.

// HTML: 
Gizli Görünür
    let p = document.getElementById('deneme');
    console.log(p.innerText);   // "Görünür"
    console.log(p.textContent); // "Gizli Görünür" (daha hızlı)

* insertAdjacentHTML(): Mevcut içeriği tamamen silmeden, bir elementin belirli bir konumuna HTML eklemenizi sağlar. Bu, innerHTML += ... yaklaşımının performans sorunlarını aşmak için daha iyi bir yoldur.
element.insertAdjacentHTML(position, text)
position değerleri: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

// HTML: 
Mevcut Öğe
    let liste = document.getElementById('liste');
    liste.insertAdjacentHTML('beforeend', '
Yeni Öğe (sona ekle)
');
    liste.insertAdjacentHTML('afterbegin', '
Yeni Öğe (başa ekle)
');
    // Artık liste: 
Yeni Öğe (başa ekle)
Mevcut Öğe
Yeni Öğe (sona ekle)

* DOM API'leri (createElement, appendChild, createTextNode): En düşük seviyeli ve en kontrol edilebilir DOM manipülasyon yöntemidir. Her bir düğümü ayrı ayrı oluşturup DOM ağacına eklemenizi sağlar. Bu yöntem, özellikle küçük, parçalı değişiklikler veya yüksek performans gerektiren durumlarda DocumentFragment ile birlikte kullanıldığında çok etkilidir. Ayrıca, güvenlik açısından da en güvenli yöntemdir çünkü HTML ayrıştırması yapmazsınız.

let yeniDiv = document.createElement('div');
    yeniDiv.id = 'yeniElement';
    let yeniMetin = document.createTextNode('Bu, createElement ile oluşturuldu.');
    yeniDiv.appendChild(yeniMetin);
    document.body.appendChild(yeniDiv);

Sonuç

innerText ve innerHTML, JavaScript'te DOM manipülasyonu için güçlü ve yaygın olarak kullanılan iki özelliktir. Her ikisi de bir elementin içeriğini okuma ve değiştirme yeteneği sunsa da, çalışma şekilleri, güvenlik etkileri ve performans karakteristikleri açısından önemli farklılıklar gösterirler.

innerText, yalnızca metin içeriğiyle ilgilenen, güvenlik odaklı ve kullanıcının gördüğü metni yansıtan durumlarda tercih edilmelidir. XSS saldırılarına karşı doğal bir koruma sağlar ve metin görüntüleme için basittir. Ancak, stil hesaplamaları nedeniyle performans maliyetleri olabilir.

innerHTML, zengin HTML içeriğini dinamik olarak oluşturmanız veya değiştirmeniz gerektiğinde vazgeçilmezdir. Karmaşık DOM yapılarını hızlıca oluşturabilir. Ancak, en büyük dezavantajı XSS güvenlik açığı riskidir. Güvenilmeyen kaynaklardan gelen verilerle kullanıldığında, dikkatli sanitizasyon veya alternatif DOM API'leri kullanılmalıdır.

Doğru aracı doğru senaryoda kullanmak, uygulamanızın hem güvenli hem de performanslı olmasını sağlar. Metin için genellikle textContent veya innerText (görünürlük önemliyse), zengin HTML için ise innerHTML (güvenilir kaynaklardan gelen verilerle) veya insertAdjacentHTML (eklemeler için) tercih edilmelidir. Büyük ve karmaşık manipülasyonlar için DocumentFragment ile birlikte DOM API'lerini kullanmak en güvenli ve performanslı yaklaşımdır. Her zaman güvenlik ve performans mülahazalarını ön planda tutarak bilinçli seçimler yapmak, sağlam ve sürdürülebilir web uygulamaları geliştirmenin anahtarıdır.