DOM Nedir? Angular DOM Kullanımı Rehberi

📌 DOM Nedir?

DOM (Document Object Model), HTML ve XML belgelerinin tarayıcı tarafından nesne tabanlı bir ağaç yapısı olarak temsil edilmesini sağlayan bir programlama arayüzüdür. Tarayıcılar bir sayfayı yüklediğinde HTML’yi parse eder ve bir DOM ağacı (DOM Tree) oluşturur. Böylece sayfadaki her öğe JavaScript tarafından erişilebilir bir nesne haline gelir.

⚙️ JavaScript ile DOM İşlemleri

JavaScript ile DOM manipülasyonu, web sayfalarını statik olmaktan çıkarır ve kullanıcı etkileşimiyle değişen dinamik arayüzler oluşturur. En yaygın DOM erişim yöntemleri:

// DOM erişim yöntemleri
document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("div");
document.querySelector(".box");
document.querySelectorAll("ul li");

✨ DOM Üzerinde Yapılabilecek İşlemler

🔹 İçerik Değiştirme (innerHTML / textContent)

const el = document.getElementById("title");
el.textContent = "DOM Nedir?";

🔹 Stil Güncelleme (element.style)

const box = document.querySelector(".box");
box.style.borderRadius = "12px";
box.style.padding = "12px";

🔹 Event Ekleme (addEventListener)

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  alert("Butona tıklandı!");
});

🔹 Yeni Element Ekleme (createElement / appendChild)

const li = document.createElement("li");
li.textContent = "Yeni liste elemanı";

document.querySelector("ul").appendChild(li);

🧱 Angular ve DOM Mimarisi

Angular, TypeScript tabanlı bir framework olup gerçek DOM (Real DOM) üzerinde çalışır. Angular Virtual DOM kullanmaz. Bunun yerine template + change detection yaklaşımıyla DOM’u yönetir.

a) Zone.js ve Change Detection

Angular’daki Change Detection mekanizması, verideki değişiklikleri izler ve DOM’u buna göre günceller. Zone.js ise async işlemleri (event, HTTP, timer vb.) takip ederek değişiklik algılamayı tetikler.

b) Template Tabanlı Yapı

@Component({
  selector: 'app-hello',
  template: '<h1>{{ title }}</h1>'
})
export class HelloComponent {
  title = 'Merhaba Angular!';
}

Bu template tarayıcıda şu çıktıyı üretir:

<h1>Merhaba Angular!</h1>

c) Angular ile Veri Bağlama (Data Binding)

• Event Binding: (click)="handleClick()"
• Property Binding: [src]="imageUrl"
• Two-Way Binding: [(ngModel)]="name"

<button (click)="handleClick()">Tıkla</button>
<img [src]="imageUrl" alt="Angular property binding" />
<input [(ngModel)]="name" placeholder="Adınız" />

🎨 Angular’da CSS Entegrasyonu

a) Bileşen Tabanlı CSS

Angular’da her bileşen (component) kendine özel bir CSS dosyasına sahip olabilir. Bu yaklaşım stil izolasyonu sağlayarak çakışmaları azaltır.

b) View Encapsulation

Angular’da varsayılan olarak ViewEncapsulation.Emulated kullanılır. Bu, bileşen stillerinin yalnızca ilgili bileşene uygulanmasını sağlar.

c) Global CSS

Uygulama genelinde ortak stiller için styles.css gibi global dosyalar kullanılabilir.

🔁 DOM Güncellenme Süreci

1. Component class veri modelini tutar.
2. Template bu modeli DOM’a bağlar.
3. Bir event tetiklenir.
4. Change Detection çalışır.
5. Sadece gerekli DOM alanları güncellenir.

Bu mekanizma, Angular uygulamalarının performansını artırır ve kullanıcı deneyimini iyileştirir.

📚 Sonuç

Bu rehberde DOM nedir, JavaScript ile DOM işlemleri, Angular DOM mimarisi, Angular event binding, change detection ve ViewEncapsulation gibi konuları ele aldık. DOM mantığını iyi kavramak, modern web arayüzleri geliştirmek için kritik öneme sahiptir.

🏷️ Etiketler