DOM (Document Object Model) ve DOM

MANİPÜLASYONU
DOM (Document Object Model) Nedir?
JavaScript'te DOM (Document Object Model), bir web sayfasının yapısını ve içeriğini programatik olarak manipüle
etmenize olanak tanıyan bir programlama nesnesidir. DOM, bir web sayfasının HTML veya XML belgesini bir ağaç
yapısı şeklinde temsil eder. Bu yapı sayesinde JavaScript ile sayfa üzerindeki içerik, stil ve yapıya erişebilir,
değiştirebilir ve dinamik olarak güncelleyebilirsiniz.

DOM'un Temel Kavramları

1. Document (Belge): Web sayfasının tamamını temsil eder. JavaScript'te bu nesneye document ile erişebilirsiniz.

2. Element (Öğe): HTML'deki her bir etiketi temsil eder. Örneğin, <div> , <p> , <img> gibi etiketler DOM'da birer
öğedir.

3. Node (Düğüm): DOM ağacındaki her bir noktadır. Elementler, metinler, yorumlar ve diğer tüm içerikler birer
düğümdür.

4. Tree (Ağaç Yapısı): DOM, bir kök (root) düğümden başlayarak dallanan bir ağaç yapısıdır. Kök düğüm
genellikle document nesnesidir. (sayfanın kendisi)

DOM Manipülasyonu
DOM Manipülasyonu (Document Object Model), web sayfasındaki HTML ve CSS yapısını programatik olarak
değiştirme işlemidir. DOM manipülasyonu ile:

HTML elemanları ekleyebilir, silebilir veya değiştirebilirsiniz.

Elemanların stillerini değiştirerek dinamik bir tasarım oluşturabilirsiniz.

Kullanıcı etkileşimlerine (butona tıklama, form gönderme vb.) yanıt verebilirsiniz.

Seçiciler
DOM elemanlarını seçmek için kullanılır. Bunlar sayesinde sayfadaki herhangi bir elementi seçip istediğimiz gibi
manipüle edebiliriz. En yaygın seçiciler:

1. [Link] - ID ile seçim yapar. Tek bir element döner.

2. [Link] - CSS seçici kullanır. Bu da bir element döner. CSS’deki seçim kuralları burada geçerlidir.
Eğer class seçicisi veya genel seçiciler ile seçim yapılırsa ilk karşılaşılan elementi döner.

3. [Link] - querySelector’un birden fazla eleman seçen versiyonudur. NodeList döner (element
dizisine benzer).

✏️ Örnek:
const butonlar = [Link]('.btn');

Burada sayfadaki btn class’ına sahip tüm elementler dönülerek buttons değişkenine atanmıştır. Buradan aynı
dizilerde olduğu gibi butonlar[2] vs. diyerek istediğimiz elemente ulaşabiliriz.

✏️ Örnek:
const basligimiz = [Link]('baslik');

Burada baslik id’sine sahip elementi döndürüp basligimiz değişkenine atadık.

DOM (Document Object Model) ve DOM MANİPÜLASYONU 1

 📌 Buradaki seçicileri sadece document nesnesine özel olarak düşünmemeliyiz. Örneğin yukarıdaki basligimiz
değişkeninde de yine bu seçicileri kullanabiliriz. Bu noktada bu seçiciler, aramayı bu elementin içinde
yapacaklardır.

[Link]('p');

Element Ekleme
Element ekleme işlemi birkaç aşamadan oluşur. Önce createElement diyerek parantezde oluşturmak istediğimiz
elementin çeşidini belirtiriz ve bir değişkene atarız. Daha sonra bunu belirleyip seçiciler ile seçtiğimiz bir elemente
appendChild metodu ile ekleriz. appendChild metodu (elementin içinde başka elementler varsa) en son sıraya

ekleyecektir.

✏️ Örnekle gösterelim;
Aşağıdaki bir div elementi olsun;

Normalde divimizin görüntüsü aşağıdaki gibidir.

<div id="container"></div>

#container {
width: 250px;
height: 250px;
background-color: #f0f0f0;
border: 1px solid #000;
margin: 0 auto;
padding: 20px;
}

Şimdi aşağıda bir button oluşturup bunu bu div elementimizi seçerek içine ekleyeceğiz.

Ekledikten sonra aşağıdaki gibi bir görüntü oluşacaktır.

Fark edileceği üzere butonun içeriğini belirlemediğimiz
için boş bir buton oluşturmuş olduk. İçeriğini
const kont = [Link]("containe
düzenlemeyi aşağıda ele alacağız.
r");
// div elementimizi seçtik

const but = [Link]("button");

// button elementini oluşturup bir değişkene atadık

[Link](but);
// yukarıda seçitğimiz div elementine buttonu ekle
dik

İçeriği Düzenlemek
Bir elementin içeriğini farklı şekillerde düzenleyebiliriz.
Eğer içeriğini metinsel olarak belirlemek istiyorsak. innerText veya textContent özelliklerinden faydalanabiliriz.

✏️ Yukarıdaki buton ekleme örneğinde butonu div’e eklemeden önce içeriğine “Tıkla” metnini ekleyelim;

DOM (Document Object Model) ve DOM MANİPÜLASYONU 2

 const kont = [Link]("container");

const but = [Link]("button");

[Link] = "Tıkla";
// butonun içeriğini değiştirdik

[Link](but);

Eğer içeriğine HTML formatında içerik eklemek istiyorsak innerHTML özelliğini kullanabiliriz.

✏️ Yukarıdaki button ekleme örneğini direkt olarak innerHTML kullanarak yapalım. Bu senaryoda createElement gibi
fonksiyonlara ihtiyacımız yoktur. Direkt olarak div’in içeriğine buttonu ekleyebiliriz.

const kont = [Link]("container");

[Link] = "<button>Tıkla</button>";

Burada da aynı çıktıyı elde ederiz. innerHTML ile içerik belirlendiğinde önceki içeriğin üstüne yazar. Yani içerik
tamamen sıfırlanıp belirlenen yeni içerik verilir.

ℹ️ innerHTML, innerText ve textContent gibi ve ileride göreceğimiz diğer özellikleri sadece set etmede kullanılan
özellikler olarak düşünmemeliyiz. Bunları okumada da kullanabiliriz. Örneğin bir elementin içeriğindeki
metni okuyabiliriz.

const butonMetni = [Link];

Bunun yanı sıra input’ların içeriği bir girdi (değer) olduğundan, bunların içeriğine value özelliği ile ulaşırız. Bu özellik
üzerinden değişiklik de yapabiliriz.

✏️ Örnek;
const inputumuz = [Link]('isimAlani');

[Link] = "Bayram"; // değiştirdik

let deger = [Link]; // okuduk

Eleman Silmek
Herhangi bir elementi silmek için, ilgili elemente seçiciler ile ulaştıktan sonra remove() metodu ile silebiliriz.

✏️ Örnek
const element = [Link]('.baslik');
element[3].remove();

Elementler Arası Gezinme

DOM manipülasyonu sırasında bir elemandan diğerine gezinebilirsiniz.

Önceki Kardeş Element (İlk Kardeş)

DOM (Document Object Model) ve DOM MANİPÜLASYONU 3

 const ahmet = [Link]('.current');
const mehmet = [Link];

Sonraki Kardeş Element

const nextElement = [Link];

ÖRNEK.

<!DOCTYPE html>
<html>
<body>
<div id="birinci">Birinci Kutu</div>
<div id="ikinci">İkinci Kutu</div>
<div id="ucuncu">Üçüncü Kutu</div>

<script>
const ikinciKutu = [Link]('ikinci');

// Bir sonraki kardeşe erişim

[Link]([Link]); // "Üçüncü Kutu"

// Bir önceki kardeşe erişim

[Link]([Link]); // "Birinci Kutu"
</script>
</body>
</html>

Parent Element

const parentElement = [Link];

ÖRNEK.

<!DOCTYPE html>
<html>
<body>
<div id="container">
<p id="paragraf">Bu bir paragraftır.</p>
</div>

<script>
const paragraf = [Link]('paragraf');
const ebeveyn = [Link];

[Link](ebeveyn); // <div id="container">...</div>

</script>
</body>
</html>

ÇIKTI: <div id="container">...</div>

Çocuk Elemanlar ve Belirli Bir Çocuğu Seçme

DOM (Document Object Model) ve DOM MANİPÜLASYONU 4

 const kartimiz = [Link]('.kart');

const allChildren = [Link];

// elementin içindeki tüm elementler seçildi

const firstChild = [Link]; // içindeki ilk element

const lastChild = [Link]; // içindeki son element

const thirdElement = allChildren[2]; // üçüncü element

const ikinciSpanElementi = [Link]('span')[1];

Elementlerin Stilini Değiştirme

Bir elementin stilini style özelliği üzerinden değiştirebiliriz. Style’a ulaştıktan sonra yine style’ın istediğimiz css
özelliğini belirleyebiliriz. Örneğin [Link] = 'red'; gibi. Burada ulaşılmak istenen css özelliğinin adı
camelCase ile yazılmalıdır. Örneğin klasik css’de background-color özelliği burada backgroundColor ile belirlenir.

DOM (Document Object Model) ve DOM MANİPÜLASYONU 5