Web Geliştirmede DOM Manipülasyonu: Temel Tekniklere Kapsamlı Bir Bakış

froxy · Cumartesi saat 17:27'de

DOM Manipülasyonu Nedir?
Web sayfaları, tarayıcı tarafından bir Belge Nesne Modeli (Document Object Model - DOM) olarak temsil edilir. DOM, HTML ve XML belgeleri için bir programlama arayüzüdür. Tarayıcı, bir HTML belgesini yüklediğinde, onu düğümlerden (elemanlar, metin, öznitelikler) oluşan bir ağaç yapısına dönüştürür. JavaScript kullanarak bu ağaç yapısını değiştirmeye, yani elemanları eklemeye, silmeye, güncellemeye veya stillerini ve içeriklerini değiştirmeye DOM Manipülasyonu denir. Bu, dinamik ve interaktif web sayfaları oluşturmanın temelidir.

MDN Web Docs'a göre: "Belge Nesne Modeli (DOM), web sayfalarını komut dosyalarından veya programlama dillerinden değiştirmemize olanak tanıyan bir API'dir."
https://developer.mozilla.org/tr/docs/Web/API/Document_Object_Model

Neden DOM Manipülasyonu Yaparız?

Kullanıcı etkileşimlerine yanıt vermek (buton tıklamaları, form gönderimleri).
Sayfa içeriğini dinamik olarak güncellemek (hava durumu widget'ları, haber akışları).
Stil ve sınıf değişiklikleri yaparak görsel geri bildirim sağlamak.
Yeni elemanlar eklemek veya mevcut olanları kaldırmak.
Verileri AJAX ile yükleyip sayfayı yeniden yüklemeden içeriği değiştirmek.

Şimdi, DOM'u manipüle etmek için kullanılan temel tekniklere dalalım.

1. Elemanlara Erişme (Selecting Elements)
DOM manipülasyonunun ilk adımı, üzerinde işlem yapacağınız HTML elemanını seçmektir. JavaScript, bunun için çeşitli yöntemler sunar:

a) ID ile Erişim:

Kod:

document.getElementById()

Belirli bir ID'ye sahip elemanı seçmek için kullanılır. ID'ler benzersiz olmalıdır.

Kod:

const myElement = document.getElementById('myUniqueId');
console.log(myElement);

b) Sınıf Adı ile Erişim:

Kod:

document.getElementsByClassName()

Belirli bir sınıf adına sahip tüm elemanları içeren bir HTMLCollection döndürür.

Kod:

const allParagraphs = document.getElementsByClassName('paragraph');
console.log(allParagraphs[0]); // İlk paragraf

c) Etiket Adı ile Erişim:

Kod:

document.getElementsByTagName()

Belirli bir HTML etiket adına sahip tüm elemanları içeren bir HTMLCollection döndürür.

Kod:

const allDivs = document.getElementsByTagName('div');
console.log(allDivs.length); // Sayfadaki div sayısı

d) CSS Seçiciler ile Erişim:

Kod:

document.querySelector()

ve

Kod:

document.querySelectorAll()

Bunlar, CSS seçicilerini kullanarak elemanlara erişmenin en modern ve esnek yollarıdır.

Kod:
```
querySelector()
```
: Belirtilen seçiciyle eşleşen ilk elemanı döndürür.
Kod:
```
querySelectorAll()
```
: Belirtilen seçiciyle eşleşen tüm elemanları içeren bir NodeList döndürür.

Kod:

// ID ile
const header = document.querySelector('#mainHeader');

// Sınıf ile
const firstItem = document.querySelector('.list-item');

// Etiket ile
const firstButton = document.querySelector('button');

// Karmaşık seçici
const specialParagraph = document.querySelector('div.content p.special');

// Tüm list-item elemanları
const allListItems = document.querySelectorAll('.list-item');
allListItems.forEach(item => {
    console.log(item.textContent);
});

https://developer.mozilla.org/tr/docs/Web/API/Document/querySelector

2. Elemanları Değiştirme (Modifying Elements)
Elemanları seçtikten sonra, onların içeriğini, özniteliklerini veya stilini değiştirebiliriz.

a) İçerik Değiştirme:

Kod:

textContent

ve

Kod:

innerHTML

Kod:
```
textContent
```
: Bir elemanın ve tüm alt elemanlarının metin içeriğini alır veya ayarlar. Güvenlidir, HTML'i ayrıştırmaz.
Kod:
```
innerHTML
```
: Bir elemanın HTML içeriğini alır veya ayarlar. Yeni HTML elemanları eklemek için kullanılabilir ancak XSS saldırılarına karşı dikkatli olunmalıdır.

Kod:

const titleElement = document.getElementById('pageTitle');
titleElement.textContent = 'Yeni Başlık Metni'; // Sadece metin içeriğini değiştirir

const contentDiv = document.getElementById('mainContent');
contentDiv.innerHTML = '<h2>Yeni Alt Başlık</h2><p>Bu bir [b]HTML[/b] içeriğidir.</p>'; // HTML içeriğini değiştirir

b) Öznitelik Değiştirme:

Kod:

setAttribute()

,

Kod:

getAttribute()

,

Kod:

removeAttribute()

Kod:
```
setAttribute(name, value)
```
: Bir elemana yeni bir öznitelik ekler veya mevcut bir özniteliğin değerini değiştirir.
Kod:
```
getAttribute(name)
```
: Bir elemanın belirli bir özniteliğinin değerini döndürür.
Kod:
```
removeAttribute(name)
```
: Bir elemandan belirli bir özniteliği kaldırır.

Kod:

const image = document.getElementById('productImage');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'Yeni Ürün Resmi');

const currentSrc = image.getAttribute('src');
console.log('Resmin mevcut kaynağı:', currentSrc);

image.removeAttribute('width'); // Genişlik özniteliğini kaldırır

c) Sınıf Değiştirme:

Kod:

classList

API
Bir elemanın CSS sınıflarını yönetmek için kullanılan bir koleksiyondur.

Kod:
```
add(className)
```
: Bir veya daha fazla sınıf ekler.
Kod:
```
remove(className)
```
: Bir veya daha fazla sınıfı kaldırır.
Kod:
```
toggle(className)
```
: Sınıf varsa kaldırır, yoksa ekler.
Kod:
```
contains(className)
```
: Sınıfın varlığını kontrol eder.

Kod:

const button = document.querySelector('.action-button');

button.classList.add('active'); // 'active' sınıfını ekle
button.classList.remove('default'); // 'default' sınıfını kaldır

if (button.classList.contains('active')) {
    console.log('Buton aktif!');
}

button.classList.toggle('highlight'); // 'highlight' sınıfını aç/kapat

https://developer.mozilla.org/tr/docs/Web/API/Element/classList

3. Eleman Oluşturma ve Ekleme (Creating and Appending Elements)
Dinamik olarak yeni HTML elemanları oluşturmak ve bunları DOM'a eklemek sıkça yapılan bir işlemdir.

a) Eleman Oluşturma:

Kod:

document.createElement()

Yeni bir HTML elemanı düğümü oluşturur.

Kod:

const newDiv = document.createElement('div');
newDiv.textContent = 'Bu dinamik olarak oluşturulmuş bir divdir.';
newDiv.classList.add('dynamic-content');

b) Eleman Ekleme:

Kod:

appendChild()

ve

Kod:

insertBefore()

Kod:
```
appendChild(childElement)
```
: Belirtilen elemanı, başka bir elemanın son çocuğu olarak ekler.
Kod:
```
insertBefore(newElement, referenceElement)
```
: Yeni elemanı, referans elemanından önce ekler.

Kod:

const container = document.getElementById('container');
container.appendChild(newDiv); // newDiv'i container'ın sonuna ekler

const firstChild = container.firstElementChild; // container'daki ilk eleman
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Bu ilk elemandan önce eklendi.';
container.insertBefore(newParagraph, firstChild); // newParagraph'ı ilk çocuğun önüne ekler

4. Eleman Silme (Removing Elements)
DOM'dan elemanları kaldırmak için çeşitli yöntemler mevcuttur.

a)

Kod:

parentNode.removeChild(childElement)

:
Bir elemanı, ebeveyn düğümünün

Kod:

removeChild

metodunu kullanarak kaldırır.

Kod:

const parent = document.getElementById('parentDiv');
const childToRemove = document.getElementById('oldChild');

if (childToRemove && parent.contains(childToRemove)) {
    parent.removeChild(childToRemove);
}

b)

Kod:

element.remove()

:
Daha modern ve doğrudan bir yaklaşımdır. Elemanı doğrudan kendisi üzerinden kaldırır.

Kod:

const elementToDelete = document.getElementById('temporaryMessage');
if (elementToDelete) {
    elementToDelete.remove();
}

5. Olay Dinleyicileri (Event Listeners)
Kullanıcı etkileşimlerine veya tarayıcı olaylarına yanıt vermek için olay dinleyicileri kullanılır.

Kod:

addEventListener(event, handler)

:
Belirli bir elemana, belirli bir olay (örneğin 'click', 'mouseover', 'submit') meydana geldiğinde çalışacak bir fonksiyon (handler) ekler.

Kod:

const myButton = document.getElementById('submitButton');

myButton.addEventListener('click', function() {
    alert('Butona tıklandı!');
});

// Arrow fonksiyonu ile
myButton.addEventListener('mouseover', () => {
    myButton.style.backgroundColor = 'lightgray';
});

myButton.addEventListener('mouseout', () => {
    myButton.style.backgroundColor = ''; // Rengi sıfırla
});

https://developer.mozilla.org/tr/docs/Web/API/EventTarget/addEventListener

Örnek Uygulama: Dinamik Liste Öğesi Ekleme
Bu teknikleri bir araya getiren küçük bir örnekle pekiştirelim. Bir metin kutusuna yazı yazıp bir butona tıklayarak listeye yeni öğeler ekleyelim.

[code language="html"]
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dinamik Liste</title>
<style>
#myList {
border: 1px solid #ccc;
padding: 10px;
min-height: 50px;
}
.list-item-new {
background-color: #e0ffe0;
margin-bottom: 5px;
padding: 5px;
border-left: 3px solid green;
}
</style>
</head>
<body>
<h1>Alışveriş Listesi</h1>
<input type="text" id="itemInput" placeholder="Yeni öğe ekle">
<button id="addItemButton">Ekle</button>
<ul id="myList">
<li>Elma</li>
<li>Süt</li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', () => {
const itemInput = document.getElementById('itemInput');
const addItemButton = document.getElementById('addItemButton');
const myList = document.getElementById('myList');

addItemButton.addEventListener('click', () => {
const itemText = itemInput.value.trim();

if (itemText !== '') {
const newItem = document.createElement('li');
newItem.textContent = itemText;
newItem.classList.add('list-item-new'); // Yeni eklenenlere stil ver

// Silme butonu ekle
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Sil';
deleteButton.style.marginLeft = '10px';
deleteButton.addEventListener('click', () => {
newItem.remove();
});

newItem.appendChild(deleteButton); // Butonu li'ye ekle
myList.appendChild(newItem); // li'yi ul'ye ekle
itemInput.value = ''; // Input'u temizle
itemInput.focus(); // Input'a odaklan
} else {
alert('Lütfen bir öğe giriniz!');
}
});
});
</script>
</body>
</html>
[/code]

Yukarıdaki örnekte,

Kod:

DOMContentLoaded

olayını dinleyerek sayfa yüklendikten sonra JavaScript kodunun çalışmasını sağladık.

Kod:

getElementById

ile elemanlara eriştik,

Kod:

addEventListener

ile buton tıklamasını yakaladık,

Kod:

createElement

ile yeni

Kod:

li

ve

Kod:

button

elemanları oluşturduk.

Kod:

textContent

ile metinlerini belirledik,

Kod:

classList.add

ile stil sınıfı ekledik ve

Kod:

appendChild

ile bunları listeye dahil ettik. Ayrıca, her yeni öğeye

Kod:

remove()

metodunu kullanarak kendini listeden silme yeteneği verdik.

En İyi Uygulamalar ve Performans İpuçları
DOM manipülasyonu güçlü bir araç olsa da, dikkatsizce kullanıldığında performansı olumsuz etkileyebilir.

DOM'u Mümkün Olduğunca Az Manipüle Edin: Özellikle döngüler içinde sürekli eleman ekleme veya güncelleme, reflow ve repaint işlemlerine neden olarak performansı düşürebilir. Toplu işlemler yapmaya çalışın. Örneğin, birden fazla eleman ekleyecekseniz, bunları önce bir
Kod:
```
DocumentFragment
```
içinde oluşturup sonra tek bir işlemde DOM'a ekleyin.
querySelector/querySelectorAll Kullanın: Genellikle
Kod:
```
getElementById
```
kadar hızlı olmasalar da, modern tarayıcılarda performans farkı çoğu zaman önemsizdir ve esneklikleri daha fazladır.
Event Delegation (Olay Yetkilendirme) Kullanın: Özellikle dinamik olarak eklenen elemanlar için her birine ayrı ayrı olay dinleyici eklemek yerine, ebeveyn elemana tek bir dinleyici ekleyerek olayları alt elemanlardan yakalayın.
innerHTML Yerine textContent Kullanın (Gerektiğinde): Sadece metin içeriği değiştiriyorsanız,
Kod:
```
textContent
```
kullanın. Bu hem güvenlik hem de performans açısından daha iyidir.
Kod:
```
innerHTML
```
kullanmanız gerekiyorsa, kullanıcıdan gelen verileri mutlaka sanitize edin (temizleyin) ve güvenlik açıklarına karşı önlem alın.
CSS Sınıflarını Kullanın: Stil değişiklikleri yapmak için JavaScript ile doğrudan
Kod:
```
element.style.property
```
kullanmak yerine, CSS sınıflarını ekleyip çıkarmak (
Kod:
```
classList
```
API ile) daha temiz ve yönetilebilir bir yaklaşımdır.

Sonuç
DOM manipülasyonu, JavaScript ile web sayfalarını canlandırmanın ve kullanıcılarla etkileşime geçmelerini sağlamanın temel taşıdır. Elemanları seçme, içeriklerini ve özniteliklerini değiştirme, yeni elemanlar oluşturma ve olaylara yanıt verme yeteneği, modern web uygulamaları geliştirmek için vazgeçilmezdir. Yukarıda bahsedilen temel teknikleri anlayarak ve en iyi uygulamaları takip ederek, performanslı ve etkileşimli web deneyimleri yaratabilirsiniz. Unutmayın, pratik yapmak öğrenmenin anahtarıdır! Kendi projelerinizde bu teknikleri denemekten çekinmeyin.