• document.getElementById(id): Belirli bir `id` özelliğine sahip tek bir öğeyi döndürür. ID'ler bir HTML belgesinde benzersiz olmalıdır, bu nedenle bu yöntem her zaman tek bir öğe döndürür veya eşleşen bir öğe bulunamazsa `null` döndürür.
• document.getElementsByClassName(className): Belirtilen sınıf adına sahip tüm öğeleri bir `HTMLCollection` olarak döndürür. Bu koleksiyon 'canlı'dır, yani DOM'da yapılan değişiklikler koleksiyona otomatik olarak yansır.
• document.getElementsByTagName(tagName): Belirtilen etiket adına sahip tüm öğeleri (örneğin, 'div', 'p', 'a') bir `HTMLCollection` olarak döndürür. Bu da canlı bir koleksiyondur.
• document.querySelector(selector): Belirtilen CSS seçicisiyle (örneğin, '#myId', '.myClass', 'div.special') eşleşen ilk öğeyi döndürür. Modern uygulamalarda sıkça tercih edilen, çok esnek bir yöntemdir.
• document.querySelectorAll(selector): Belirtilen CSS seçicisiyle eşleşen tüm öğeleri bir `NodeList` olarak döndürür. `NodeList`, `HTMLCollection`'ın aksine genellikle 'statiktir' (bazı istisnalar dışında), yani DOM'da sonradan yapılan değişiklikler bu NodeList'i otomatik olarak güncellemez.

// ID ile bir başlığı seçme
const anaBaslik = document.getElementById('anaBaslik');
if (anaBaslik) {
  console.log('Ana Başlık Metni:', anaBaslik.textContent);
}

// Sınıf adı ile tüm "kart" öğelerini seçme
const urunKartlari = document.getElementsByClassName('urun-kart');
for (let i = 0; i < urunKartlari.length; i++) {
  console.log('Ürün Kartı ' + (i + 1) + ' ID:', urunKartlari[i].id || 'Yok');
}

// CSS seçici ile bir input alanını seçme (ilk bulunan)
const aramaKutusu = document.querySelector('input[type="search"]');
if (aramaKutusu) {
  console.log('Arama Kutusu Yer Tutucusu:', aramaKutusu.placeholder);
}

// CSS seçici ile tüm liste öğelerini seçme
const tumListeElemanlari = document.querySelectorAll('ul.menu-list > li');
tumListeElemanlari.forEach((item, index) => {
  console.log(index + 1 + '. Menü Öğesi:', item.textContent);
});

• textContent: Bir öğenin ve onun tüm alt öğelerinin sadece görünür metin içeriğini ayarlar veya döndürür. HTML etiketleri metin olarak kabul edilir ve yorumlanmaz. XSS (Cross-Site Scripting) saldırılarına karşı daha güvenlidir çünkü kullanıcıdan gelen verileri saf metin olarak işler.
• innerHTML: Bir öğenin hem metin hem de HTML içeriğini ayarlar veya döndürür. Bu özelliği kullanarak bir öğenin içine tamamen yeni HTML yapıları enjekte edebilirsiniz. Ancak, kullanıcıdan gelen verileri doğrudan `innerHTML`'e atamak ciddi güvenlik zafiyetlerine yol açabilir.
• setAttribute(name, value): Bir öğenin belirtilen bir özelliğinin (örneğin, 'src', 'href', 'class', 'id') değerini ayarlar veya yeni bir özellik ekler.
• getAttribute(name): Bir öğenin belirtilen özelliğinin mevcut değerini döndürür.
• removeAttribute(name): Bir öğeden belirtilen özelliği kaldırır.

const durumMesaji = document.getElementById('durum');
durumMesaji.textContent = 'Veriler başarıyla yüklendi!'; // Sadece metin içeriğini günceller

const uyariKutusu = document.getElementById('uyari');
uyariKutusu.innerHTML = '[b]Dikkat:[/b] Lütfen profil bilgilerinizi güncelleyin! [url=/profil]Buraya tıklayın.[/url]'; // HTML içeriğiyle günceller

const resimOgeleri = document.querySelectorAll('img');
resimOgeleri.forEach(img => {
  const mevcutSrc = img.getAttribute('src');
  if (mevcutSrc.includes('placeholder')) {
    img.setAttribute('src', 'https://example.com/gercek-resim.jpg');
    img.setAttribute('alt', 'Gerçek Resim');
  }
});

const gizliDugme = document.getElementById('gizliDugme');
if (gizliDugme.hasAttribute('disabled')) {
  gizliDugme.removeAttribute('disabled'); // Düğmeyi etkinleştirir
}

• element.style.propertyName: Bir öğenin doğrudan inline stilini değiştirmek için kullanılır. Örneğin, `element.style.color = 'red';` veya `element.style.display = 'none';`. Bu yöntem hızlı ve doğrudan değişiklikler için kullanışlıdır ancak çok sayıda stil değişikliği veya karmaşık durumlar için tavsiye edilmez çünkü CSS'in gücünü (özellikle seçici özgüllüğünü ve cascade yapısını) bypass eder ve kodun okunabilirliğini azaltabilir.
• element.classList: Bir öğenin CSS sınıflarını eklemek, çıkarmak veya kontrol etmek için kullanılır. Bu, stil yönetiminde inline stil kullanmaktan çok daha tercih edilen bir yöntemdir. CSS'in gücünü tam olarak kullanmanızı sağlar ve stilin JavaScript'ten ayrılmasına yardımcı olur. `classList` API'si aşağıdaki metotları sunar:
• `add(...className)`: Bir veya daha fazla sınıf ekler.
• `remove(...className)`: Bir veya daha fazla sınıfı kaldırır.
• `toggle(className, force)`: Sınıf varsa kaldırır, yoksa ekler. İkinci parametre `force` `true` ise ekler, `false` ise kaldırır.
• `contains(className)`: Sınıfın var olup olmadığını kontrol eder (boolean döndürür).
• `replace(oldClassName, newClassName)`: Eski sınıfı yeniyle değiştirir.

const modAnahtari = document.getElementById('modAnahtari');
modAnahtari.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  // Eğer dark-mode sınıfı eklendiyse metni değiştir
  if (document.body.classList.contains('dark-mode')) {
    modAnahtari.textContent = 'Açık Mod';
  } else {
    modAnahtari.textContent = 'Koyu Mod';
  }
});

const fiyatGosterim = document.getElementById('fiyat');
if (parseFloat(fiyatGosterim.textContent) < 50) {
  fiyatGosterim.style.color = 'green';
  fiyatGosterim.style.fontWeight = 'bold';
} else {
  fiyatGosterim.style.color = 'red';
}

• document.createElement(tagName): Belirtilen etiket adına (örneğin, 'div', 'p', 'li') sahip yeni bir HTML öğesi oluşturur. Bu öğe henüz DOM'a eklenmemiştir, sadece hafızada oluşturulmuştur.
• document.createTextNode(text): Yeni bir metin düğümü oluşturur. Genellikle bir öğeye metin içeriği eklemek için `appendChild` veya `insertBefore` ile birlikte kullanılır.
• parentNode.appendChild(child): Belirtilen alt öğeyi (child) `parentNode` öğesinin son çocuğu olarak ekler. Eğer alt öğe zaten DOM'daysa, mevcut konumundan kaldırılır ve yeni konumuna taşınır.
• parentNode.insertBefore(newNode, referenceNode): Yeni bir öğeyi (newNode) `parentNode` içinde, belirtilen referans düğümünden (referenceNode) hemen önce ekler. `referenceNode` `null` ise, `appendChild` gibi davranır ve sona ekler.
• parentNode.removeChild(child): `parentNode` öğesinden belirtilen alt öğeyi (child) kaldırır. Kaldırılan öğeye bir referans tutarsanız, daha sonra tekrar DOM'a ekleyebilirsiniz.
• element.remove(): Öğeyi doğrudan DOM'dan kaldıran daha modern ve kısa bir yöntemdir. `parentNode.removeChild(element)`'in basitleştirilmiş bir alternatifidir.

const yorumlarBolumu = document.getElementById('yorumlar');

// Yeni bir yorum öğesi oluştur
const yeniYorumDiv = document.createElement('div');
yeniYorumDiv.className = 'yorum-kutusu';

const yazarAdi = document.createElement('h4');
yazarAdi.textContent = 'Yeni Kullanıcı';
yeniYorumDiv.appendChild(yazarAdi);

const yorumMetni = document.createElement('p');
yorumMetni.textContent = 'Bu harika bir DOM manipülasyon örneği!';
yeniYorumDiv.appendChild(yorumMetni);

// Yorumu yorumlar bölümüne ekle
yorumlarBolumu.appendChild(yeniYorumDiv);

// İlk yorumu kaldır (eğer varsa)
const ilkYorum = yorumlarBolumu.firstElementChild;
if (ilkYorum) {
  yorumlarBolumu.removeChild(ilkYorum);
}

// Belirli bir öğeyi doğrudan kaldırma
const kaldirilacakElement = document.querySelector('.reklam-bandi');
if (kaldirilacakElement) {
  kaldirilacakElement.remove(); // Reklam bandını sayfadan kaldırır
}

const gonderButonu = document.getElementById('gonderButonu');
gonderButonu.addEventListener('click', (event) => {
  event.preventDefault(); // Formun varsayılan gönderimini engeller
  const kullaniciGirdisi = document.getElementById('kullaniciGirdisi').value;
  if (kullaniciGirdisi.trim() === '') {
    alert('Lütfen bir şeyler yazın!');
  } else {
    const yeniParagraf = document.createElement('p');
    yeniParagraf.textContent = 'Girdiğiniz Metin: ' + kullaniciGirdisi;
    document.body.appendChild(yeniParagraf);
    document.getElementById('kullaniciGirdisi').value = ''; // Inputu temizle
  }
});

const resimKutusu = document.getElementById('resimKutusu');
resimKutusu.addEventListener('mouseover', () => {
  resimKutusu.style.border = '3px solid blue';
});
resimKutusu.addEventListener('mouseout', () => {
  resimKutusu.style.border = '1px solid gray';
});

• Reflow ve Repaint'i Minimumda Tutun: `Reflow` (veya Layout), bir öğenin geometrik pozisyonu veya boyutu değiştiğinde tarayıcının tüm sayfayı yeniden hesaplaması işlemidir. `Repaint`, renk veya görünürlük gibi stil değişiklikleri olduğunda sayfanın sadece görünümünü yeniden çizmesidir. Her ikisi de kaynak yoğun işlemlerdir. Mümkün olduğunca az DOM değişikliği yapmaya çalışın.
• Tek Seferde Değişiklik Yapın: Birden fazla DOM değişikliği yapmanız gerektiğinde, bu değişiklikleri bir araya getirin ve tek bir operasyonla uygulayın. Örneğin, bir döngü içinde her iterasyonda DOM'a öğe eklemek yerine, `DocumentFragment` kullanarak tüm öğeleri önce bir parçada oluşturup sonra bu parçayı DOM'a tek seferde ekleyin.
• DocumentFragment Kullanımı: `document.createDocumentFragment()` yöntemi, geçici bir DOM parçası oluşturmanızı sağlar. Bu parçaya öğeler ekleyebilir ve değişiklikleri yapabilirsiniz. Parçayı ana DOM'a eklediğinizde, tarayıcı tüm değişiklikleri tek bir `reflow` işleminde işler, bu da performansı artırır.
  
  Kod:

  const ulElement = document.getElementById('buyukListe');
  const fragment = document.createDocumentFragment();
  
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = 'Liste Öğesi ' + i;
    fragment.appendChild(li);
  }
  ulElement.appendChild(fragment); // Tek seferde 1000 öğeyi ekle

• Olay Delegasyonu (Event Delegation) Kullanın: Dinamik olarak eklenen veya çok sayıda benzer öğeye sahip olduğunuzda, her birine ayrı olay dinleyicisi eklemek yerine, bu öğelerin ortak üst öğesine tek bir olay dinleyicisi ekleyin. Olay yukarıya doğru kabarcıklanır (bubbling), bu sayede üst öğe, olayın hangi alt öğeden geldiğini kontrol edebilir. Bu, hafıza kullanımını azaltır ve performansı artırır.
• CSS Sınıflarını Tercih Edin: Yukarıda da belirtildiği gibi, stil değişiklikleri için doğrudan `element.style` yerine CSS sınıflarını kullanmak, tarayıcının stil hesaplamalarını daha verimli yapmasına olanak tanır ve kodunuzu daha yönetilebilir hale getirir.
• Modern JavaScript Kütüphaneleri ve Çerçeveleri: React, Vue.js, Angular gibi modern frontend kütüphaneleri ve çerçeveleri, DOM manipülasyonunu soyutlar ve kendi "sanal DOM" (Virtual DOM) mekanizmalarıyla optimize ederler. Bu çerçeveler, DOM'daki değişiklikleri minimuma indirerek performansı artırır ve geliştiricilerin doğrudan DOM ile uğraşma yükünü azaltır. Ancak bu, saf JavaScript ile DOM manipülasyonunun temellerini anlamanın önemini azaltmaz; zira bu çerçevelerin altında yatan mantık yine DOM prensiplerine dayanır.

"Web geliştirme dünyasında DOM, kalbin HTML ve damarların CSS olduğu bir vücudun sinir sistemidir. Onu kontrol etmek, web sayfalarınıza hayat vermek demektir."

Genişletmek için tıkla ...