Web sayfaları sadece statik yazılar ve görsellerden oluşmaz. Günümüzde modern web siteleri oldukça etkileşimlidir ve bu etkileşimi sağlayan temel dillerden biri JavaScript’tir. JavaScript sayesinde bir kullanıcı sayfayı görüntülerken, o anda sayfadaki içerikler değiştirilebilir. Bu yazıda, bir web sayfasındaki içerikleri nasıl değiştirebileceğimizi ve özellikle üç önemli özelliği — innerText, textContent ve innerHTML — nasıl kullanabileceğimizi detaylı bir şekilde inceleyeceğiz.
DOM Nedir ve Neden Önemlidir?
Her HTML belgesi, tarayıcı tarafından yüklendiğinde DOM (Document Object Model) adı verilen özel bir yapı haline gelir. Bu yapı sayesinde JavaScript, sayfadaki öğelere ulaşabilir ve onları değiştirebilir. Bu süreçte “DOM manipülasyonu” adı verilen işlemler yapılır. Örneğin, bir paragrafın içindeki yazıyı değiştirmek, başlığa yeni bir kelime eklemek ya da bir bağlantıyı başka bir yazıyla güncellemek gibi.
DOM manipülasyonunda en sık karşılaşılan işlemlerden biri, HTML etiketlerinin içindeki yazı içeriklerini almak ya da onları değiştirmektir. Bu işlem için JavaScript dilinde üç temel özellik kullanılır: innerText, textContent ve innerHTML.
innerText: Kullanıcıya Görünen Yazıyı Yönetmek
innerText özelliği, bir HTML öğesinin yalnızca görünen metin içeriğini alır veya değiştirir. Yani CSS ile display: none yapılmış veya sayfada görünmeyen herhangi bir içerik, innerText ile alınmaz.
Örnek:
<p id="bilgi">Bu yazı görünür.</p>
const paragraf = document.getElementById("bilgi");
console.log(paragraf.innerText); // Çıktı: Bu yazı görünür.
paragraf.innerText = "Yeni içerik yüklendi.";
Bu örnekte, innerText kullanılarak sayfadaki <p> etiketinin içindeki yazı “Yeni içerik yüklendi.” olarak değiştirildi. Eğer bu paragrafın içinde bazı kısımlar gizlenmiş olsaydı, onlar göz ardı edilirdi.
textContent: Tüm Yazı İçeriğini Almak (Gizli Olsa Bile)
textContent, görünür olup olmadığına bakmadan HTML öğesinin tüm metin içeriğini alır. Bu yönüyle innerText'ten farklıdır. Ayrıca, performans açısından textContent daha hızlı çalışır ve boşluk karakterleri ile satır boşluklarını da içerebilir.
Örnek:
<div id="uyari">
Bu yazı görünür.
<span style="display: none;">Bu yazı gizlidir.</span>
</div>
const kutu = document.getElementById("uyari");
console.log(kutu.textContent);
// Çıktı: Bu yazı görünür. Bu yazı gizlidir.
Gördüğünüz gibi, textContent ile hem görünür hem de gizli içerikler elde edilebiliyor.
innerHTML: HTML Etiketlerini Yönetmek
innerHTML özelliği, bir HTML öğesinin içindeki etiketlerle birlikte tüm içeriği verir ve bu içeriği değiştirme olanağı tanır. En önemli farkı, HTML etiketlerini tanıması ve onların da manipüle edilebilmesidir.
Örnek:
<h2 id="baslik">Merhaba</h2>
const baslik = document.getElementById("baslik");
baslik.innerHTML = "<u>Yeni Başlık</u>";
Bu kod çalıştırıldığında, <h2> etiketi içindeki yazı “Yeni Başlık” olarak değişir ve altı çizili olur. Çünkü <u> etiketi HTML’de alt çizgi için kullanılır. Bu işlemi innerText ile yapsaydık, yazı şöyle görünürdü: <u>Yeni Başlık</u> — yani HTML etiketi yazı olarak görünürdü, etki etmezdi.
HTML İçeriğine Yeni Öğeler Eklemek
innerHTML ayrıca var olan içeriğin üzerine yeni içerik eklemek için de kullanılabilir. Bunun için += operatörü ile mevcut içeriğe yeni bir HTML elemanı eklenebilir.
Örnek:
const duyuru = document.querySelector("#duyuru");
duyuru.innerHTML += "<p><strong>Yeni içerik eklendi.</strong></p>";
Bu kod, sayfadaki #duyuru ID’sine sahip öğeye yeni bir paragraf ekler. Bu paragraf kalın yazı içerir. innerText ya da textContent ile böyle bir şey yapmak mümkün değildir çünkü onlar HTML etiketlerini sadece yazı gibi görür.
Aralarındaki Farkların Tablosu
| Özellik | Ne Yapar? | Gizli İçeriği Alır mı? | HTML Etiketlerini Tanır mı? |
|---|
innerText | Yalnızca görünen yazıyı alır veya değiştirir | Hayır | Hayır |
textContent | Tüm yazıyı (gizli olanlar dahil) alır | Evet | Hayır |
innerHTML | Hem yazıyı hem HTML etiketlerini alır veya yazar | Evet | Evet |
Sonuç
DOM manipülasyonu, JavaScript öğrenen herkesin karşılaşacağı önemli bir konudur. innerText, textContent ve innerHTML gibi özellikler, web sayfalarındaki içerikleri değiştirmek için temel araçlardır. Bu özellikleri ezberlemek zorunda değilsiniz; önemli olan hangi durumda hangisinin işe yaradığını anlamaktır. Gerekirse MDN (Mozilla Developer Network) gibi kaynaklardan yardım alarak kullanımı öğrenebilirsiniz.
Basitçe söylemek gerekirse:
- Görünen metni değiştirmek için:
innerText
- Tüm metni almak için (gizli olanlar dahil):
textContent
- HTML içerikleriyle oynamak için:
innerHTML
Bu üç özellik, web geliştirme sürecinde dinamik sayfalar oluşturmak için vazgeçilmez araçlardır. Özellikle etkileşimli projeler geliştirmek isteyen herkesin bu farkları iyi kavraması gerekir.