İçeriği Değiştirme: textContent innerHTML classList
Öğe metin içeriğini okuyup güncelleyin, HTML ekleyin ve CSS class'larını programatik olarak açıp kapatın, ekleyin ve kaldırın.
İçeriği Değiştirme: textContent innerHTML classList, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
textContent Okuma ve Yazma
element.textContent, bir öğenin tüm alt öğeleri dâhil olmak üzere düz metin içeriğini okur veya ayarlar. Güvenlidir; HTML'yi hiçbir zaman ayrıştırmaz. Bu nedenle userInput ile ayarlamak XSS güvenlik açıkları oluşturmaz.
const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children
// Safe with user input:
element.textContent = userInput; // no XSS riskinnerHTML — Dikkatli Kullanın
element.innerHTML, bir öğenin içindeki HTML işaretlemesini okur veya ayarlar. Kullanışlıdır, ancak userInput ile kullanıldığında tehlikelidir; HTML'yi ayrıştırır ve betikleri çalıştırabilir (XSS). innerHTML değerini temizlenmemiş kullanıcı verileriyle hiçbir zaman ayarlamayın.
card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string
// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability
// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput; // won't parse as HTMLinnerText ve textContent Karşılaştırması
innerText yalnızca görünür metni döndürür (CSS display:none değerini dikkate alır) ve bir yerleşim hesaplamasını tetikler. textContent, gizli metinler dâhil tüm metni döndürür ve daha hızlıdır. Özellikle görünür metin davranışına ihtiyacınız yoksa textContent kullanmayı tercih edin.
classList — Sınıf Ekleme ve Kaldırma
element.classList, sınıf adının tamamını değiştirmeden CSS sınıflarını değiştirmek için yöntemler sağlar. add(), remove(), toggle(), contains(), replace().
const btn = document.querySelector('.btn');
btn.classList.add('active'); // add a class
btn.classList.remove('disabled'); // remove a class
btn.classList.toggle('open'); // add if absent, remove if present
console.log(btn.classList.contains('active')); // trueZorunlu Parametreyle toggle
classList.toggle('class', condition), koşul doğru kabul edildiğinde sınıfı ekler, yanlış kabul edildiğinde kaldırır. Bir sınıfı bir boolean durumuyla eşzamanlamanın temiz bir yoludur.
const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/removeÖznitelikleri Okuma ve Ayarlama
element.getAttribute('attr') herhangi bir özniteliği okur. element.setAttribute('attr', value) özniteliği ayarlar. element.removeAttribute('attr') özniteliği kaldırır. element.hasAttribute('attr') özniteliğin varlığını denetler.
const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');data-* Öznitelikleri
Özel data-* öznitelikleri, DOM'u etkilemeden öğeler üzerinde ek veriler depolar. Bunlara element.dataset üzerinden camelCase biçiminde erişebilirsiniz.
<div id="card" data-user-id="42" data-role="admin"></div>
const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role); // 'admin'
card.dataset.status = 'active'; // sets data-statusStil Özelliği
element.style.propertyName, satır içi stilleri ayarlar. Tireli özellikler için camelCase kullanın. Satır içi stiller ayarlamak yerine CSS sınıflarını açıp kapatmayı tercih edin; sınıflar, styles değerlerini ait oldukları CSS dosyalarında tutar.
element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';
// Reset inline style:
element.style.removeProperty('background-color');Hesaplanmış Stilleri Okuma
getComputedStyle(element), yalnızca satır içi stilleri değil, kademeli uygulama sonrasında gerçekten kullanılan stilleri döndürür. CSS sınıfları veya tarayıcının varsayılanı tarafından ayarlanan stilleri okumak için kullanın.
const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize); // '16px'
console.log(styles.display); // 'flex'title ve meta Etiketlerini Değiştirme
Belge başlığı (tarayıcı sekmesi), document.title = 'New Title' ile istediğiniz zaman değiştirilebilir. SPA'larda görünümler arasında gezinirken daha iyi bir kullanıcı deneyimi sağlar.
// Update tab title on route change:
document.title = `${pageName} | MyApp`;scrollIntoView()
element.scrollIntoView({ behavior: 'smooth' }), öğeyi yumuşak bir kaydırmayla görünür alana getirir. Bölüme kaydırma gezinmesi ve formlardaki doğrulama hatalarını vurgulamak için idealdir.
document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });Hızlı Kontrol
XSS riski olmadan kullanıcı tarafından sağlanan metni DOM'da güvenle görüntülemek için hangi özelliği kullanmalısınız?
Özet: DOM'u Değiştirme
textContent düz metni güvenle ayarlar. innerHTML HTML'yi ayarlar (userInput ile tehlikelidir). classList.add/remove/toggle CSS sınıflarını düzenli biçimde yönetir. setAttribute/dataset HTML özniteliklerini yönetir. Satır içi stiller yerine sınıf açıp kapatmayı tercih edin. getComputedStyle son uygulanan stilleri okur.
Sıkça Sorulan Sorular
“İçeriği Değiştirme: textContent innerHTML classList” dersi ücretsiz mi?
Evet — “İçeriği Değiştirme: textContent innerHTML classList” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“İçeriği Değiştirme: textContent innerHTML classList” dersinde ne öğreneceğim?
Öğe metin içeriğini okuyup güncelleyin, HTML ekleyin ve CSS class'larını programatik olarak açıp kapatın, ekleyin ve kaldırın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“İçeriği Değiştirme: textContent innerHTML classList” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- querySelector ve querySelectorAll
- addEventListener ve Olay Nesnesi
- İçeriği Değiştirme: textContent innerHTML classList
- Öğe Oluşturma ve Ekleme