Ders Detayı - KoDemi

Bu ders için video bulunmamaktadır.

Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

Giriş: DOM Nedir?

Web sayfalarıyla etkileşim kurmak, JavaScript'in en güçlü kullanım alanlarından biridir. Kullanıcı bir butona tıkladığında bir mesaj göstermek, bir formu gönderildiğinde verileri doğrulamak veya bir sayfadaki içeriği dinamik olarak güncellemek gibi işlemler JavaScript ile yapılır. Bu etkileşimi mümkün kılan temel yapı ise DOM'dur.

DOM (Document Object Model - Belge Nesne Modeli), bir HTML veya XML belgesinin programlama arayüzüdür. Tarayıcı bir web sayfasını yüklediğinde, sayfanın HTML yapısını bellekte bir ağaç yapısı (tree structure) olarak temsil eder. Bu ağaçtaki her bir düğüm (node), HTML belgesindeki bir öğeyi (element), metni (text) veya niteliği (attribute) temsil eder. DOM, bu ağaç yapısını ve düğümlerini JavaScript gibi diller aracılığıyla erişilebilir ve değiştirilebilir hale getirir.

Kısacası, DOM sayesinde JavaScript kullanarak:

Sayfadaki HTML elemanlarını seçebiliriz.
Elemanların içeriğini (metin, HTML) değiştirebiliriz.
Elemanların niteliklerini (attributes - örn. src, href, id, class) değiştirebiliriz.
Elemanların CSS stillerini değiştirebiliriz.
Sayfaya yeni elemanlar ekleyebilir veya mevcutları silebiliriz.
Sayfadaki olaylara (events - örn. tıklama, fare hareketi, klavye girişi) tepki verebiliriz.

Bu derste, DOM'un temellerini, HTML elemanlarını nasıl seçeceğimizi ve seçilen elemanların içeriğini, niteliklerini ve stillerini nasıl değiştireceğimizi (manipüle edeceğimizi) öğreneceğiz.

DOM Ağacı ve Düğümler (Nodes)

Tarayıcı, bir HTML belgesini okuduğunda, onu bir ağaç yapısına dönüştürür. Bu ağacın en tepesinde document nesnesi bulunur. document nesnesi, tüm HTML sayfasını temsil eder ve DOM'a erişim için başlangıç noktasıdır.

Ağaçtaki her şey bir düğümdür (node). Başlıca düğüm türleri şunlardır:

Element Düğümü (Element Node): HTML etiketlerini temsil eder (örn. <p>, <div>, <img>).
Metin Düğümü (Text Node): HTML elemanlarının içindeki metinleri temsil eder.
Nitelik Düğümü (Attribute Node): HTML elemanlarının niteliklerini temsil eder (örn. id="baslik", class="vurgu"). (Genellikle doğrudan manipüle edilmezler, element düğümü üzerinden erişilir).
Yorum Düğümü (Comment Node): HTML yorumlarını () temsil eder.
Document Düğümü: Tüm belgeyi temsil eden kök düğümdür.

JavaScript ile bu düğümler arasında gezinebilir, yeni düğümler oluşturabilir, mevcutları değiştirebilir veya silebiliriz.

ornek.html
<!DOCTYPE html>
<html>
<head>
    <title>Örnek Sayfa</title>
</head>
<body>
    <h1 id="baslik">Merhaba DOM!</h1>
    <p class="icerik">Bu bir paragraftır.</p>
    <!-- Bu bir yorumdur -->
</body>
</html>

Yukarıdaki basit HTML sayfasının DOM ağacı kabaca şu şekilde düşünülebilir:

document
- html
  - head
    - title
      - Metin Düğümü: "Örnek Sayfa"
  - body
    - h1 (Nitelik: id="baslik")
      - Metin Düğümü: "Merhaba DOM!"
    - p (Nitelik: class="icerik")
      - Metin Düğümü: "Bu bir paragraftır."
    - Yorum Düğümü: " Bu bir yorumdur "

HTML Elemanlarını Seçme (Selecting Elements)

DOM manipülasyonunun ilk adımı, üzerinde işlem yapmak istediğimiz HTML elemanını veya elemanlarını seçmektir. JavaScript, bunun için document nesnesi üzerinde çeşitli metodlar sunar.

1. ID ile Seçme: `getElementById()`

Bir HTML elemanını benzersiz id niteliği ile seçmenin en hızlı ve yaygın yoludur. Belirtilen ID'ye sahip elemanı döndürür. Eğer o ID'ye sahip bir eleman yoksa null döndürür.

getElementById.js

// HTML: Sayfa Başlığı

let baslikElementi = document.getElementById("ana-baslik");

if (baslikElementi) {
    console.log("Başlık elementi bulundu:", baslikElementi);
    console.log(baslikElementi.textContent); // "Sayfa Başlığı"
} else {
    console.log("Belirtilen ID ile element bulunamadı.");
}

let olmayanElement = document.getElementById("yok-boyle-bir-id");
console.log(olmayanElement); // null

2. Etiket Adı ile Seçme: `getElementsByTagName()`

Belirtilen etiket adına (tag name) sahip tüm elemanları seçer. Geriye canlı (live) bir HTMLCollection döndürür. Bu koleksiyon dizi benzeri bir yapıdır ancak tam bir dizi değildir (bazı dizi metodları doğrudan kullanılamaz).

getElementsByTagName.js

// HTML:
// Paragraf 1
// Bir div
// Paragraf 2




let paragraflar = document.getElementsByTagName("p");
console.log(paragraflar); // HTMLCollection [p, p]
console.log("Paragraf sayısı:", paragraflar.length); // 2

// Koleksiyondaki elemanlara indeks ile erişme
console.log(paragraflar[0].textContent); // "Paragraf 1"
console.log(paragraflar[1].textContent); // "Paragraf 2"

// Koleksiyon üzerinde döngü (Array.from ile diziye çevirerek veya for döngüsü ile)
for (let i = 0; i < paragraflar.length; i++) {
    console.log(`Paragraf ${i+1}:`, paragraflar[i].innerText);
}

Array.from(paragraflar).forEach(p => {
    console.log("forEach ile:", p.textContent);
});

3. Sınıf Adı ile Seçme: `getElementsByClassName()`

Belirtilen sınıf adına (class name) sahip tüm elemanları seçer. Geriye canlı (live) bir HTMLCollection döndürür.

getElementsByClassName.js

// HTML:
// Mavi Kutu
// Kırmızı Span
// Normal Kutu

let kutular = document.getElementsByClassName("kutu");
console.log(kutular); // HTMLCollection [div.kutu.mavi, span.kutu.kirmizi, p.kutu]
console.log("Kutu sayısı:", kutular.length); // 3

console.log(kutular[0].textContent); // "Mavi Kutu"

// Birden fazla sınıf adı ile seçme (bu metod doğrudan desteklemez, querySelectorAll kullanılır)
// let maviKutular = document.getElementsByClassName("kutu mavi"); // Bu genellikle beklenildiği gibi çalışmaz

4. CSS Seçicileri ile Seçme: `querySelector()` ve `querySelectorAll()`

Modern JavaScript'te eleman seçmek için en güçlü ve esnek yöntemlerdir. CSS seçicilerini (selectors) kullanarak elemanları seçmenizi sağlar.

querySelector(cssSeçici): Belirtilen CSS seçicisine uyan ilk elemanı döndürür. Eşleşen eleman yoksa null döndürür.
querySelectorAll(cssSeçici): Belirtilen CSS seçicisine uyan tüm elemanları statik (non-live) bir NodeList olarak döndürür. Eşleşen eleman yoksa boş bir NodeList döndürür. NodeList, HTMLCollection'a benzer ancak bazı farklılıkları vardır ve genellikle forEach gibi dizi metodlarını doğrudan destekler.

querySelector.js

// HTML:
// 
//     İlk paragraf.
//     İkinci paragraf.
//     
//         Liste öğesi 1
//         Liste öğesi 2
//     
// 

// querySelector ile ilk eşleşeni seçme
let ilkParagraf = document.querySelector("p"); // İlk p elemanı
console.log(ilkParagraf.textContent); // "İlk paragraf."

let vurguluIlk = document.querySelector(".vurgu"); // "vurgu" sınıfına sahip ilk eleman (p)
console.log(vurguluIlk.textContent); // "İlk paragraf."

let anaDivIlkParagraf = document.querySelector("#ana p"); // id'si "ana" olan div içindeki ilk p
console.log(anaDivIlkParagraf.textContent); // "İlk paragraf."

let olmayan = document.querySelector(".yok-boyle-sinif");
console.log(olmayan); // null

// querySelectorAll ile tüm eşleşenleri seçme
let tumParagraflar = document.querySelectorAll("p");
console.log(tumParagraflar); // NodeList [p.vurgu, p]
console.log("Paragraf sayısı:", tumParagraflar.length); // 2

let tumVurgulular = document.querySelectorAll(".vurgu");
console.log(tumVurgulular); // NodeList [p.vurgu, li.vurgu]

// NodeList üzerinde forEach kullanımı
tumVurgulular.forEach((elem, index) => {
    console.log(`Vurgulu ${index + 1}:`, elem.tagName, elem.textContent);
});
// Çıktı:
// Vurgulu 1: P İlk paragraf.
// Vurgulu 2: LI Liste öğesi 2

İpucu: querySelector ve querySelectorAll, ID, sınıf, etiket adı, nitelik ve bunların kombinasyonları gibi çok çeşitli CSS seçicilerini desteklediği için genellikle en esnek ve tercih edilen seçme yöntemleridir.

Eleman İçeriğini Değiştirme

Bir HTML elemanını seçtikten sonra, içeriğini çeşitli özellikler kullanarak okuyabilir ve değiştirebiliriz.

`textContent`

Bir elemanın ve onun alt elemanlarının sadece metin içeriğini temsil eder. HTML etiketlerini yok sayar. Hem okunabilir hem de yazılabilirdir.

textContent.js

// HTML: Merhaba Dünya!

let mesajDiv = document.getElementById("mesaj");

// İçeriği okuma
console.log(mesajDiv.textContent); // "Merhaba Dünya!"

// İçeriği değiştirme
mesajDiv.textContent = "JavaScript ile içerik değişti.";
console.log(mesajDiv.textContent); // "JavaScript ile içerik değişti."
// HTML şimdi: JavaScript ile içerik değişti.

`innerHTML`

Bir elemanın içindeki HTML kodunu temsil eder. Hem metni hem de HTML etiketlerini içerir. Hem okunabilir hem de yazılabilirdir.

innerHTML.js

// HTML: 

let listeAlani = document.getElementById("liste-alani");

// innerHTML ile HTML içeriği ekleme
listeAlani.innerHTML = "Meyveler
Elma
Armut";

console.log(listeAlani.innerHTML);
// Çıktı (yaklaşık):
// Meyveler
Elma
Armut

// innerHTML ile içeriği okuma
// HTML: Bu eğik bir metindir.
let p = document.getElementById("paragraf");
console.log(p.innerHTML); // "Bu eğik bir metindir."
console.log(p.textContent); // "Bu eğik bir metindir."

Güvenlik Uyarısı: Kullanıcıdan alınan veya güvenilmeyen kaynaklardan gelen verileri doğrudan innerHTML ile ayarlamak güvenlik riskleri (Cross-Site Scripting - XSS) oluşturabilir. Çünkü bu, sayfaya rastgele HTML ve JavaScript kodu eklenmesine izin verebilir. Mümkünse, sadece metin içeriğini değiştirmek için textContent kullanın veya içeriği güvenli hale getirme (sanitizing) yöntemleri uygulayın.

DOM Manipülasyonu - Giriş

Ders İçeriği

Giriş: DOM Nedir?

DOM Ağacı ve Düğümler (Nodes)

HTML Elemanlarını Seçme (Selecting Elements)

1. ID ile Seçme: getElementById()

Sayfa Başlığı

2. Etiket Adı ile Seçme: getElementsByTagName()

3. Sınıf Adı ile Seçme: getElementsByClassName()

4. CSS Seçicileri ile Seçme: querySelector() ve querySelectorAll()