JavaScript DOM Manipülasyonu Nedir?

Web geliştirme dünyasına adım attığınızda HTML ile sayfaların iskeletini oluşturmayı ve CSS ile bu sayfaları renklendirip şekillendirmeyi öğrenirsiniz. Ancak bu web sayfaları kendi başlarına “statiktir”; yani siz onlara bir şey yapmadıkça değişmezler. Bir web sayfasındaki bir butona tıkladığınızda yeni bir metnin belirmesini, bir açılır menünün açılmasını veya sayfanın arka plan renginin değişmesini sağlayan güç JavaScript‘tir.

JavaScript’in bu sihirli etkileşimleri yapabilmesini sağlayan en önemli kavrama ise DOM (Document Object Model – Belge Nesne Modeli) adı verilir. Bu kapsamlı rehberimizde, DOM’un ne olduğunu ve JavaScript kullanarak web sayfalarını dinamik olarak nasıl manipüle edebileceğinizi (değiştirebileceğinizi) örneklerle, adım adım öğreneceğiz.

1. DOM (Document Object Model) Nedir?

DOM, bir HTML sayfasını alıp onu JavaScript’in anlayabileceği “mantıksal bir ağaç” (logical tree) yapısına dönüştüren sistemdir. Web tarayıcınız bir HTML belgesini yüklediğinde, bu belgeyi hiyerarşik bir nesne ağacı olarak modeller.

Bu ağacın en tepesinde html elementi bulunur ve onun altında head (başlık) ve body (gövde) gibi diğer elementler çocuk (child) düğümler olarak yer alır. Örneğin body elementinin içinde h1 (başlık) veya div gibi başka elementler, onların içinde de p (paragraf) veya a (link) gibi elementler olabilir. Bu hiyerarşik yapı sayesinde JavaScript, sayfadaki herhangi bir HTML elementini seçebilir, silebilir, değiştirebilir veya sayfaya tamamen yeni bir element ekleyebilir.

Not: DOM, tarayıcı penceresini ve geçmişini (history) yöneten BOM (Browser Object Model) kavramından farklıdır. BOM tarayıcı penceresiyle iletişim kurarken, DOM doğrudan HTML belgesinin içeriğiyle ilgilenir.

2. DOM Üzerinde Element Seçmek (Selecting Elements)

Bir elementi değiştirmeden önce, JavaScript’e o elementi bulmasını söylememiz gerekir. Tıpkı birine “Şu kırmızı kitabı bana ver” demek gibi. JavaScript’te element seçmek için en sık kullanılan yöntemler şunlardır:

a) ID’ye Göre Seçim (getElementById) Sayfadaki bir elementi, ona verilmiş benzersiz id (kimlik) değeri ile seçmenin en hızlı yoludur. Eğer sayfanızda birden fazla aynı ID’ye sahip element varsa, bu metot sadece karşılaştığı ilk elementi döndürür.

// HTML: <div id="kutu">Merhaba</div>
let secilenKutu = document.getElementById("kutu");

b) Etiket İsmine Göre Seçim (getElementsByTagName) Belirli bir HTML etiketine (örneğin tüm <div> veya <p> etiketlerine) sahip tüm elementleri seçer. Bu işlem geriye bir HTMLCollection (HTML Koleksiyonu) listesi döndürür.

let tumParagraflar = document.getElementsByTagName("p");

c) Sınıf İsmine Göre Seçim (getElementsByClassName) Belirli bir CSS sınıfına sahip olan elementleri seçmek için kullanılır. Yine geriye bir HTML Koleksiyonu döner.

d) CSS Seçicileriyle Seçim (querySelector ve querySelectorAll) En modern ve esnek seçim yöntemidir. Tıpkı CSS yazar gibi element seçebilirsiniz.

• querySelector(".ornek"): Eşleşen ilk elementi getirir.
• querySelectorAll(".ornek"): Eşleşen tüm elementleri statik bir NodeList olarak getirir.

let ilkKutu = document.querySelector("#kutu"); // ID'si kutu olan ilk element
let tumKutular = document.querySelectorAll(".kutu-sinifi"); // Class'ı kutu-sinifi olan tüm elementler

3. DOM Ağacında Gezinmek (Traversing the DOM)

Bazen bir elementi doğrudan seçmek yerine, bir elementten diğerine “seyahat etmeniz” gerekebilir. DOM ağacında aşağı, yukarı veya yana doğru hareket edebilirsiniz.

• Aşağı İnmek (Çocuk Elementler): children özelliği ile bir elementin içindeki HTML elementlerine ulaşabilirsiniz. childNodes özelliği metin ve yorum düğümlerini de içerdiği için sadece elementleri getiren children çok daha kullanışlıdır.
• Yukarı Çıkmak (Ebeveyn Element): Bulunduğunuz elementin ebeveynini bulmak için parentElement kullanılır.
• Yana Gitmek (Kardeş Elementler): Aynı seviyedeki bir sonraki elemente gitmek için nextElementSibling, bir öncekine gitmek için ise previousElementSibling kullanılır.

4. İçeriği Değiştirmek: innerText ve innerHTML

Bir elementi seçtikten sonra, onun ekranda görünen metnini değiştirebilirsiniz. Bunun için iki temel özelliğimiz vardır:

innerText Kullanımı: Sadece düz metin olarak işlem yapar. HTML etiketlerini yazı gibi algılar.

let baslik = document.querySelector("h1");
baslik.innerText = "JavaScript Çok Eğlenceli!";

Eğer baslik.innerText = "<p>Merhaba</p>" yazsaydınız, ekranda gerçekten <p>Merhaba</p> yazısı belirirdi.

innerHTML Kullanımı: İçeriğe HTML etiketleri dahil ederek müdahale etmenizi sağlar.

let icerikDivi = document.getElementById("icerik");
icerikDivi.innerHTML = "<strong>Bu metin kalın yazılacak.</strong>";

5. Elementlerin Stilini ve Sınıflarını Değiştirmek (Manipulating Style and Classes)

Sayfanızdaki elementlerin görünümünü değiştirmek için CSS kullanılır. JavaScript ile bu CSS özelliklerine doğrudan müdahale edebiliriz.

Stil (Style) Özelliğini Değiştirmek: Her DOM elementinin bir style özelliği vardır.

let kutu = document.getElementById("kutu");
kutu.style.backgroundColor = "blue"; // Arka planı mavi yapar

Sınıf (Class) Manipülasyonu: Doğrudan stil vermek yerine elemente CSS’te tanımladığınız sınıfları eklemek veya çıkarmak çok daha temiz bir yöntemdir. Bunun için classList özelliğini kullanırız.

• Sınıf Eklemek (add): Elementi görünmez yapan “gizle” adlı bir sınıf ekleyelim. kutu.classList.add("gizle");
• Sınıf Çıkarmak (remove): Sınıfı elementten kaldırır. kutu.classList.remove("mavi-kutu");
• Sınıfı Değiştirmek / Aç-Kapa (toggle): Eğer elementte bu sınıf varsa çıkarır, yoksa ekler. Bu, butonlara tıklandığında açılıp kapanan menüler (accordion) yapmak için kusursuzdur. kutu.classList.toggle("aktif");

6. HTML Özniteliklerini (Attributes) Yönetmek

Bir HTML elementinin özellikleri (örneğin <img src="..."> içindeki src veya bir linkteki href) öznitelik olarak adlandırılır. setAttribute() metodu ile bir elementin herhangi bir özniteliğini değiştirebilirsiniz.

let resim = document.querySelector("img");
resim.setAttribute("src", "yeni-resim.jpg"); // Resmin kaynağını değiştirir
resim.setAttribute("id", "yeni-id"); // Elementin ID'sini değiştirir

7. Yepyeni Elementler Oluşturmak ve Sayfaya Eklemek

Mevcut elementleri değiştirmek harikadır ama ya sıfırdan bir şeyler üretmek isterseniz? JavaScript bunu sadece iki adımda yapar: Önce elementi yaratır, sonra DOM ağacına yapıştırırsınız.

document.createElement("etiketIsmi") fonksiyonu, hafızada yeni bir HTML elementi üretir. appendChild() ise oluşturulan bu elementi alıp, istediğiniz bir ebeveynin içine (örneğin sayfanın gövdesine) en son çocuk olarak ekler.

// 1. Adım: Yeni bir <p> elementi yarat
let yeniParagraf = document.createElement("p");

// 2. Adım: İçine metin ekle
yeniParagraf.innerText = "Bu paragraf JavaScript ile sonradan eklendi!";

// 3. Adım: Sayfanın body (gövde) kısmına yapıştır
document.body.appendChild(yeniParagraf);

Yukarıdaki kod çalıştığında sayfanın en altına anında yeni bir metin eklenecektir.

Özetle

JavaScript ile DOM manipülasyonu, modern, etkileşimli ve dinamik web sayfaları yapmanın temelidir. Öğrendiğimiz seçici komutları (querySelector, getElementById) ile sayfanızdaki elementleri avlayabilir; innerText, innerHTML, style ve classList özellikleri sayesinde kullanıcının hareketlerine göre bu elementleri dönüştürebilir ve createElement ile sayfaya anında yeni ögeler enjekte edebilirsiniz.

Bu konuyu pekiştirmenin en iyi yolu; kendi yazdığınız bir HTML sayfasını tarayıcıda açıp F12 tuşuna basarak Konsol’a girmek ve az önce öğrendiğiniz komutları doğrudan denemektir!