JavaScript Ders 7 – DOM Manipülasyonu

DOM, HTML belgesini bir ağaç yapısı gibi temsil eder ve JavaScript’in bu yapıya erişerek sayfayı manipüle etmesini sağlar.

DOM’a Giriş

DOM, HTML, XML veya SVG belgelerini nesne olarak temsil eden bir arayüzdür. Tarayıcılar, HTML kodunu ayrıştırarak DOM ağacını oluşturur ve JavaScript’in bu ağaca erişmesini sağlar.

DOM, hiyerarşik bir ağaç yapısına sahiptir. document nesnesi kök düğümdür ve diğer tüm öğeler onun alt öğeleri olarak düzenlenir.

document Nesnesi: HTML belgesini temsil eder ve DOM manipülasyonu için temel noktadır.

HTML Elementlerine Erişim

getElementById(): Belirli bir id’ye sahip olan HTML elementine erişmek için kullanılır.

JavaScript
let baslik = document.getElementById("baslik"); // id'si "baslik" olan elementi bulur
console.log(baslik);

getElementsByClassName(): Belirli bir class name’e sahip olan tüm HTML elementlerine erişmek için kullanılır. Bir HTMLCollection döndürür (canlı bir liste).

JavaScript
let paragraflar = document.getElementsByClassName("paragraf"); // class'ı "paragraf" olan tüm elementleri bulur
console.log(paragraflar);

querySelector(): CSS seçicisine uyan ilk HTML elementine erişmek için kullanılır.

JavaScript
let ilkParagraf = document.querySelector(".paragraf"); // class'ı "paragraf" olan ilk elementi bulur
console.log(ilkParagraf);

querySelectorAll(): CSS seçicisine uyan tüm HTML elementlerine erişmek için kullanılır. Bir NodeList döndürür (statik bir liste).

JavaScript
let tumParagraflar = document.querySelectorAll(".paragraf"); // class'ı "paragraf" olan tüm elementleri bulur
console.log(tumParagraflar);

HTML İçeriğini Değiştirme

innerHTML: Bir HTML elementinin içeriğini değiştirmek için kullanılır. HTML kodunu da içerebilir. Güvenlik açısından dikkatli kullanılmalıdır (XSS saldırılarına karşı).

JavaScript
let baslik = document.getElementById("baslik");
baslik.innerHTML = "<h1>Yeni Başlık</h1>";

textContent: Bir HTML elementinin metin içeriğini değiştirmek için kullanılır. HTML etiketlerini yorumlamaz, sadece metni değiştirir.

JavaScript
let paragraf = document.getElementById("paragraf");
paragraf.textContent = "Bu yeni bir paragraf.";

setAttribute() ve removeAttribute(): Bir HTML elementinin özelliklerini değiştirmek veya kaldırmak için kullanılır.

JavaScript
let resim = document.getElementById("resim");
resim.setAttribute("src", "yeni_resim.jpg"); // Resmin kaynağını değiştirir
resim.removeAttribute("alt"); // 'alt' özelliğini kaldırır

Yeni Elemanlar Oluşturma ve Ekleme

createElement(): Yeni bir HTML elementi oluşturmak için kullanılır.

JavaScript
let yeniParagraf = document.createElement("p");
yeniParagraf.textContent = "Bu dinamik olarak eklenen bir paragraftır.";

appendChild(): Bir HTML elementini başka bir HTML elementinin altına eklemek için kullanılır.

JavaScript
let body = document.body;
body.appendChild(yeniParagraf); // Yeni paragrafı body'nin sonuna ekler

insertBefore(): Bir HTML elementini başka bir HTML elementinin önüne eklemek için kullanılır.

Elemanları Silme

removeChild(): Bir HTML ebeveyninden bir çocuğu silmek için kullanılır.

JavaScript
let body = document.body;
body.removeChild(yeniParagraf); // Yeni paragrafı body'den siler

Olay Yönetimi (Event Handling)

Olay Türleri: click, mouseover, keydown, submit vb.

addEventListener(): Bir HTML elementine olay dinleyicisi eklemek için kullanılır.

JavaScript
let buton = document.getElementById("buton");
buton.addEventListener("click", function() {
  alert("Butona tıklandı!");
});

removeEventListener(): Bir HTML elementinden olay dinleyicisini kaldırmak için kullanılır.

Örnek:

JavaScript
<button id="buton">Değiştir</button>
<p id="paragraf">Başlangıç metni.</p>

<script>
  let buton = document.getElementById("buton");
  let paragraf = document.getElementById("paragraf");

  buton.addEventListener("click", function() {
    paragraf.textContent = "Butona tıklandı!";
  });
</script>

Kaynak: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Etiketler