Angularda DOM (Document Object Model) Manipülasyonu

Mustafa Seker - 2023/08/07

DOM Nedir ?

DOM (Document Object Model), web sayfalarının yapısını temsil eden bir programlama arayüzüdür. Bir HTML veya XML belgesini temsil eden her öğeyi, bu öğeleri manipüle etmek ve erişmek için kullanılan bir nesne olarak ele alır.

Web tarayıcıları, bir web sayfasını yüklediğinizde, sayfanın HTML içeriğini analiz eder ve bu içeriği ağaç yapısında bir DOM olarak oluşturur. Bu ağaç yapısı, web sayfasındaki her elementi, özelliklerini ve ilişkilerini içerir.

DOM elementleri, sayfadaki her HTML etiketini temsil eder ve bir nesne olarak ele alınabilirler. JavaScript gibi programlama dilleri kullanılarak DOM elementlerine erişilebilir, içerikleri değiştirilebilir ve özellikleri ile etkileşimde bulunulabilir. Bu, web sayfalarını dinamik hale getirmek, içeriği güncellemek veya etkileşimli özellikler eklemek için kullanılabilir.

Angulara bilidindiği üzere TypeScript tabanlı bir JavaScript çerçevesidir . Öncelikle JavaScript kullandığımızda nasıl bir yöntem kullanıyoruz onlara bakalım.

JavaScript ile DOM elemente erişmek ve manipulasyonu ;

JavaScript ile DOM elementlerine erişmek için birkaç yöntem bulunmaktadır. İşte en yaygın kullanılan yöntemler:

1. getElementById(): Bir elementin id özniteliğine göre elementi seçmek için kullanılır.

const element = document.getElementById("elementId");

1. getElementsByTagName(): Belirli bir etikete sahip tüm elementleri seçmek için kullanılır.

const elements = document.getElementsByTagName("div");

1. getElementsByClassName(): Belirli bir sınıf adına sahip tüm elementleri seçmek için kullanılır.

const elements = document.getElementsByClassName("className");

1. querySelector(): CSS seçicileriyle uyumlu olarak elementi seçmek için kullanılır.

const element = document.querySelector("#elementId"); const elements = document.querySelectorAll(".className");

1. querySelectorAll(): querySelector ile benzer şekilde çalışır, ancak tüm eşleşen elementleri NodeList olarak döndürür.

const elements = document.querySelectorAll("div");

Bu yöntemler sayesinde JavaScript ile DOM elementlerine erişebilir, içeriklerini değiştirebilir ve özellikleri ile etkileşimde bulunabilirsiniz.

Etkileşime geçtiğimiz elementte ne gibi işlemler yapabiliriz.

Birkaç örnek ile üzerinden geçelim.

1. İçerik değiştirme: innerHTML veya textContent özelliklerini kullanarak elementin içeriğini değiştirebilirsiniz.

const element = document.getElementById("elementId");
element.innerHTML = "Yeni içerik";

1. Element özelliklerine erişim: Elementin özelliklerine JavaScript ile erişebilir ve değiştirebilirsiniz.

const element = document.getElementById("elementId");
element.setAttribute("attributeName", "attributeValue");

1. Stil değiştirme: Elementin CSS stil özelliklerini değiştirebilirsiniz.

const element = document.getElementById("elementId");
element.style.backgroundColor = "red";

1. Event dinleyicileri eklemek: Elementlere olay dinleyicileri ekleyerek belirli olaylara tepki verebilirsiniz.

const element = document.getElementById("elementId");
element.addEventListener("click", function() {
  // Tıklama olayına tepki vermek için buraya kod ekleyebilirsiniz.
});

1. Element oluşturma: JavaScript ile yeni elementler oluşturabilir ve sayfaya ekleyebilirsiniz.

const newElement = document.createElement("div");
newElement.textContent = "Yeni bir div elementi";
document.body.appendChild(newElement);

Bu gibi yöntemlerle JavaScript kullanarak DOM elementleriyle etkileşimde bulunabilir ve web sayfanızı dinamik ve etkileşimli hale getirebilirsiniz.

Angular tarafına gelecek olursak işler dahada dinamik hale gelmiş durumda doğrudan DOM’a erişmek yerine Anguların bize sağladığı özellikleri kullancağız.

Bu özellikler nelerdir.

1. Template ile Veri Bağlama (Data Binding): Angular’ın template mekanizması sayesinde component sınıfındaki verileri direkt olarak HTML şablonuna bağlayabilirsiniz. Bu şekilde, DOM içeriğini bileşenin özelliklerine göre dinamik olarak değiştirebilirsiniz.

2. Yönergeler (Directives): Angular, özel yönergelerle DOM elementlerini manipüle etmek için özel işlevler sunar. Örneğin, *ngIf veya *ngFor gibi yönergelerle şartlı içerik veya tekrarlayan içerik ekleyebilirsiniz.

3. Renderer: Angular, DOM manipülasyonları için Renderer sınıfını kullanır. Renderer, DOM manipülasyonlarının doğrudan yapılmasını engelleyerek platform bağımsızlığını korur ve güvenlik risklerini azaltır.

4. ViewChildren ve ViewChild: Component sınıfında @ViewChildren ve @ViewChild dekoratörleri ile template’de tanımlanan elementlere erişebilir ve onları manipüle edebilirsiniz.

5. ElementRef: Component sınıfında ElementRef kullanarak doğrudan DOM elementlerine erişebilir ve değişiklik yapabilirsiniz. Ancak bu yöntem, potansiyel güvenlik açıklarına neden olabileceği için dikkatli kullanılmalıdır.

Yukarıdaki maddeleri küçük kod örnekleriyle destekleyelim.

Template Binding (Veri Bağlama)

HTML Template:

<!-- app.component.html -->
<div>
  <p>{{ message }}</p>
  <button (click)="changeMessage()">Mesajı Değiştir</button>
</div>

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Merhaba, Angular!';
  
  changeMessage() {
    this.message = 'Yeni mesajı değiştirdiniz!';
  }
}

Bu örnekte, bir div içinde bir paragraf (p) ve bir düğme (button) bulunmaktadır. Paragrafın içeriği, AppComponent sınıfındaki “message” adlı özelliğe bağlıdır. Düğmeye tıklandığında “changeMessage()” fonksiyonu çağrılır ve “message” özelliği güncellenir, bu sayede paragrafın içeriği de değişir.

Yönergeler (Directives)

HTML Template:

<!-- app.component.html -->
<div *ngIf="showMessage">
  <p>Mesaj gösteriliyor</p>
</div>
<button (click)="toggleMessage()">Mesajı Göster/Gizle</button>

Component Sınıfı:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showMessage = true;
 
  toggleMessage() {
    this.showMessage = !this.showMessage;
  }
}

Bu örnekte, *ngIf yönergesi kullanılarak bir div elementi şartlı olarak gösteriliyor veya gizleniyor. Düğmeye tıklandığında “toggleMessage()” fonksiyonu çağrılır ve showMessage değişkeni tersine çevrilerek div elementi gösterilip gizlenir.

ElementRef ve Renderer Kullanımı

HTML Template:

<!-- app.component.html -->
<div #myElement>İlk durum</div>
<button (click)="changeContent()">İçeriği Değiştir</button>

Component Sınıfı:

// app.component.ts
import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  changeContent() {
    const myDiv = this.elementRef.nativeElement.querySelector('#myElement');
    this.renderer.setProperty(myDiv, 'textContent', 'Yeni içerik');
    this.renderer.setStyle(myDiv, 'color', 'red');
  }
}

Bu örnekte, template’de “myElement” adında bir div elementi bulunmaktadır. AppComponent sınıfında, ElementRef ve Renderer2 servislerini enjekte ederiz. “changeContent()” fonksiyonu çağrıldığında, ElementRef ile “myElement” divini seçeriz ve Renderer2 ile içeriğini değiştirir ve stili ayarlarız.

Angular, ElementRef ve Renderer kullanımını doğrudan DOM manipülasyonlarına alternatif olarak sunar. Bu, DOM işlemlerinin daha güvenli ve platform bağımsız olmasını sağlar ve güvenlik açıklarını en aza indirir. Ancak bu tür manipülasyonlarda, güvenlik ve performans açısından dikkatli olmak önemlidir. Yapılan değişikliklerin düzgün bir şekilde temizlenmesi ve elemanların yaşam döngüsüne uygun bir şekilde yönetilmesi gerekmektedir.

Son olarak ViewChildren ve ViewChild dekoratörlerini kullanabiliriz. Bu dekoratörler, belirli bir şablondaki elementlere erişmemizi sağlar ve bunlara olay dinleyicileri eklememize yardımcı olur.

HTML Template:

<!-- app.component.html -->
<button #myButton>Butona Tıkla</button>

Component Sınıfı:

// app.component.ts
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myButton', { static: true }) myButton: ElementRef;

  ngAfterViewInit() {
    this.myButton.nativeElement.addEventListener('click', this.onClick.bind(this));
  }

  onClick() {
    console.log('Butona tıklandı!');
  }
}

Bu örnekte, template’de bir düğme (button) bulunmaktadır ve bu düğme ViewChildren ve ViewChild dekoratörü kullanılarak component sınıfında erişilmektedir. AppComponent sınıfında “myButton” adında bir ViewChild tanımlanır. Ardından, ngAfterViewInit() yöntemi içinde düğmeye bir click olay dinleyicisi eklenir.

Okuduğunuz için teşekkürler. Diğer yazılarımda görüşmek üzere.