DOM Nedir?

DOM (Document Object Model), bir web sayfasının HTML veya XML içeriğini programlama dilleri tarafından okunup değiştirilebilir hale getiren standart bir arayüzdür. Tarayıcı, bir sayfayı yüklediğinde HTML kodunu ağaç yapısına dönüştürür; JavaScript bu yapı üzerinden sayfa içeriğine, stil bilgilerine ve yapısal öğelere dinamik olarak erişebilir ve bunları değiştirebilir.

DOM Ne İşe Yarar?

DOM (Document Object Model), bir web sayfasının tarayıcıda nasıl temsil edildiğini tanımlayan yapıdır.

1. 1. Sayfayı dinamik hale getirir.
2. 2. JavaScript ile HTML arasında köprü kurar.
3. 3. Kullanıcı etkileşimlerini yakalar.

DOM’un Temel Kavramları

Node (Düğüm): DOM ağacındaki her şey bir node’dur. Bir HTML etiketi, metin içeriği, HTML belgesi veya bir yorum satırı birer node olarak temsil edilir. Dört temel node türü vardır:

• Document node: Ağacın kök noktasıdır, tüm belgeyi temsil eder.
• Element node: <div>, <p>, <h1> gibi HTML etiketleridir.
• Text node: Bir öğenin içindeki metin içeriğidir.
• Attribute node: class, id, href gibi etiket özelliklerini temsil eder.

Parent / Child / Sibling: DOM ağacı aile ilişkileri metaforuyla tanımlanır. Bir öğeyi içine alan öğe parent (ebeveyn), içinde barınan öğeler child (çocuk), aynı parent’a sahip öğeler ise sibling (kardeş) olarak adlandırılır.

DOM Ağacı Nasıl Görünür?

Aşağıdaki basit bir HTML belgesini ele alalım:

• <!DOCTYPE html>
• <html>
•   <head>
•     <title>Örnek Sayfa</title>
•   </head>
•   <body>
•     <h1>Merhaba Dünya</h1>
•     <p>Bu bir paragraftır.</p>
•   </body>
• </html>

Tarayıcı bu kodu ayrıştırdığında şöyle bir ağaç yapısı oluşturur:

Document

└── html

    ├── head

    │   └── title

    │       └── “Örnek Sayfa”

    └── body

        ├── h1

        │   └── “Merhaba Dünya”

        └── p

            └── “Bu bir paragraftır.”

DOM ve HTML Aynı Şey midir?

Hayır. HTML, tarayıcıya gönderilen statik metin kodudur. DOM ise tarayıcının bu kodu ayrıştırdıktan sonra oluşturduğu canlı, programlanabilir yapıdır. JavaScript DOM’u değiştirdiğinde HTML dosyası değişmez; yalnızca tarayıcıdaki temsil güncellenir.

DOM’a Yalnızca JavaScript ile mi Erişilir?

Hayır. DOM dil bağımsız bir standarttır; Python, Java veya C# gibi dillerle de erişilebilir. Ancak tarayıcı ortamında fiilen kullanılan dil JavaScript’tir.