DOM (Document Object Model) Nedir?

[ZeberusZeberus is verified member.]

DOM (Document Object Model), web sayfalarının yapısal bir temsilidir ve JavaScript'in HTML veya XML belgeleriyle etkileşimde bulunmasına olanak sağlar. DOM, bir web sayfasındaki tüm elemanları (metinler, bağlantılar, başlıklar, resimler, vb.) bir ağaç yapısında düzenler ve her elemanı birer "düğüm" (node) olarak tanımlar. Bu, JavaScript'in sayfa içeriğini dinamik olarak değiştirmesine ve manipüle etmesine imkan verir.

DOM Nedir?

DOM, bir HTML veya XML belgesinin yapısını bir ağaç şeklinde organize eder. Bu ağaç, sayfanın her bir elemanının bir "düğüm" (node) olarak temsil edilmesini sağlar. Her düğüm, sayfadaki bir öğe (örneğin bir metin, bir etiket, bir atribut) olarak kabul edilir ve bu düğümlere JavaScript üzerinden erişilebilir.

Örneğin, bir HTML belgesi şu şekilde görünebilir:

html
Kodu kopyala

<span>&lt;<span>html</span>&gt;</span><br>  <span>&lt;<span>head</span>&gt;</span><br>    <span>&lt;<span>title</span>&gt;</span>Örnek Sayfa<span>&lt;/<span>title</span>&gt;</span><br>  <span>&lt;/<span>head</span>&gt;</span><br>  <span>&lt;<span>body</span>&gt;</span><br>    <span>&lt;<span>h1</span>&gt;</span>Başlık<span>&lt;/<span>h1</span>&gt;</span><br>    <span>&lt;<span>p</span>&gt;</span>Bu bir paragraftır.<span>&lt;/<span>p</span>&gt;</span><br>  <span>&lt;/<span>body</span>&gt;</span><br><span>&lt;/<span>html</span>&gt;</span><br>

Bu HTML belgesinin DOM yapısı, şöyle bir ağaç şeklinde düzenlenebilir:

less
Kodu kopyala

<span>Document</span><br> ├── <span>html</span><br> │    ├── <span>head</span><br> │    │    └── <span>title</span> (<span>"Örnek Sayfa"</span>)<br> │    └── <span>body</span><br> │         ├── <span>h1</span> (<span>"Başlık"</span>)<br> │         └── <span>p</span> (<span>"Bu bir paragraftır."</span>)<br>

DOM'un Temel Özellikleri:

[*]Ağaç Yapısı:

[*]DOM, HTML veya XML belgesindeki her öğeyi bir "node" (düğüm) olarak temsil eder ve bu düğümler hiyerarşik bir yapıda birbirine bağlıdır. Ağaç yapısındaki her düğüm bir HTML etiketi, metin, yorum ya da başka bir öğe olabilir.

[*]Dinamik Manipülasyon:

[*]JavaScript, DOM'u kullanarak HTML öğelerini, metinleri ve stil özelliklerini dinamik olarak değiştirebilir. Örneğin, JavaScript kullanarak bir sayfadaki başlıkları değiştirebilir, yeni öğeler ekleyebilir veya mevcut öğeleri silebilirsiniz.

[*]Etkinlik Yönetimi:

[*]DOM, kullanıcının sayfadaki öğelerle etkileşimini yönetmeye imkan verir. JavaScript, kullanıcı tıklamaları, tuş vuruşları gibi olaylara tepki verebilir. Bu, dinamik ve etkileşimli web sayfaları oluşturmanıza olanak tanır.

[*]Tarayıcı Tarafında Çalışır:

[*]DOM, tarayıcıda çalışır ve tarayıcıya HTML belgelerinin yapısal bir temsilini sağlar. Tarayıcı, DOM'u kullanarak sayfadaki öğeleri render eder ve kullanıcının etkileşimlerine tepki verir.

DOM ve JavaScript:

JavaScript, DOM ile etkileşimde bulunarak web sayfalarını dinamik hale getirir. JavaScript, DOM'u kullanarak:


[*]HTML öğelerini seçebilir.
[*]Yeni öğeler oluşturabilir.
[*]Sayfa içeriğini değiştirebilir.
[*]Sayfaya yeni özellikler veya stil ekleyebilir.

DOM ile Yapılabilenler:

[*]HTML Elemanlarına Erişim:

[*]JavaScript ile DOM üzerinden belirli HTML öğelerine (etiketler, başlıklar, paragraflar vb.) erişebilirsiniz.
javascript
Kodu kopyala

<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>

Bu örnekte, getElementById() metodu ile HTML belgesindeki id="myHeading" olan öğeye erişilmektedir.
[*]HTML İçeriğini Değiştirme:

[*]DOM kullanarak bir öğenin içeriğini değiştirebilirsiniz.
javascript
Kodu kopyala

<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>heading.<span>innerHTML</span> = <span>"Yeni Başlık"</span>;<br>

Bu, myHeading id'sine sahip öğenin içeriğini "Yeni Başlık" olarak değiştirecektir.
[*]Yeni Öğeler Eklemek:

[*]JavaScript ile sayfaya yeni HTML öğeleri ekleyebilirsiniz.
javascript
Kodu kopyala

<span>var</span> newElement = <span>document</span>.<span>createElement</span>(<span>"p"</span>);<br>newElement.<span>innerHTML</span> = <span>"Bu yeni bir paragraftır."</span>;<br><span>document</span>.<span>body</span>.<span>appendChild</span>(newElement);<br>

[*]HTML Elemanlarını Silme:

[*]DOM ile bir HTML öğesini silebilirsiniz.
javascript
Kodu kopyala

<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>heading.<span>parentNode</span>.<span>removeChild</span>(heading);<br>

[*]CSS ile Stilleri Değiştirme:

[*]JavaScript, DOM üzerinden sayfa stilini değiştirmeye de imkan tanır.
javascript
Kodu kopyala

<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>heading.<span>style</span>.<span>color</span> = <span>"blue"</span>;<br>

DOM Olayları:

JavaScript, DOM ile etkileşimde bulunarak olayları dinleyebilir ve bu olaylara tepki verebilir. Örneğin, bir butona tıklandığında bir işlem gerçekleştirmek için DOM olaylarını kullanabilirsiniz:

javascript
Kodu kopyala

<span>var</span> button = <span>document</span>.<span>getElementById</span>(<span>"myButton"</span>);<br>button.<span>addEventListener</span>(<span>"click"</span>, <span>function</span>(<span></span>) {<br>    <span>alert</span>(<span>"Butona tıkladınız!"</span>);<br>});<br>

Bu örnekte, kullanıcı "myButton" id'sine sahip butona tıkladığında, bir uyarı (alert) mesajı gösterilecektir.

DOM'un Avantajları:

[*]Dinamik İçerik Manipülasyonu:

[*]JavaScript ile sayfa içeriğini dinamik bir şekilde değiştirme ve kullanıcı etkileşimlerine tepki verme imkanı sağlar.

[*]Tarayıcı Bağımsızlığı:

[*]DOM, modern web tarayıcıları tarafından desteklenen bir yapıdır ve tarayıcılar arasındaki uyumsuzlukları minimize eder.

[*]Web Uygulamalarının Temeli:

[*]Dinamik web uygulamalarının temelini oluşturan DOM, zengin ve etkileşimli kullanıcı deneyimleri yaratmaya olanak tanır.

Sonuç:

DOM, web sayfalarının yapısal bir temsilidir ve JavaScript ile etkileşimli, dinamik içerik oluşturmak için kullanılan temel bir yapı taşır. DOM, HTML ve XML belgelerinin üzerinde işlem yapmayı sağlar ve web geliştirme sürecinde önemli bir rol oynar.

 

[Yapay-Zeka]

DOM (Document Object Model) Nedir?

DOM, web sayfalarının yapısını temsil eden bir yapıdır ve JavaScript'in HTML veya XML belgeleriyle etkileşime girmesini sağlar. DOM, bir web sayfasındaki tüm elemanları bir ağaç yapısında düzenler ve her elemanı bir düğüm (node) olarak tanımlar. Bu yapı sayesinde JavaScript, sayfa içeriğini dinamik olarak değiştirip manipüle edebilir.

Örneğin, bir HTML belgesinin DOM yapısı, sayfanın her elemanının bir düğüm olarak temsil edildiği bir ağaç yapısına benzetilebilir. Bu sayede JavaScript, belgenin herhangi bir elemanına kolayca erişebilir ve üzerinde değişiklik yapabilir.

DOM'un Temel Özellikleri:
1. Ağaç Yapısı: DOM, HTML veya XML belgelerindeki her öğeyi bir düğüm olarak temsil eder ve bu düğümler hiyerarşik bir yapıda birbirine bağlıdır.
2. Dinamik Manipülasyon: JavaScript kullanılarak DOM aracılığıyla HTML öğeleri, metinler ve stil özellikleri dinamik olarak değiştirilebilir.
3. Etkinlik Yönetimi: DOM, kullanıcının sayfadaki öğelerle etkileşimini yönetmeyi sağlar ve JavaScript olaylara tepki verebilir.
4. Tarayıcı Tarafında Çalışma: DOM, tarayıcıda çalışır ve HTML belgelerinin yapısal bir temsilini sağlar.

DOM ve JavaScript:
JavaScript, DOM'u kullanarak web sayfalarını dinamik hale getirir. JavaScript, DOM aracılığıyla HTML öğelerini seçebilir, yeni öğeler oluşturabilir, sayfa içeriğini değiştirebilir ve sayfaya yeni özellikler veya stil ekleyebilir.

DOM ile Yapılabilenler:
- HTML elemanlarına erişim sağlama
- HTML içeriğini değiştirme
- Yeni öğeler eklemek
- HTML elemanlarını silme
- CSS ile stil değişiklikleri yapma

DOM Olayları:
JavaScript, DOM ile olayları dinleyip bu olaylara tepki verebilir. Örneğin, bir butona tıklandığında belirli bir işlem gerçekleştirmek için DOM olaylarını kullanabilirsiniz.

DOM'un Avantajları:
- Dinamik içerik manipülasyonu
- Tarayıcı bağımsızlığı
- Web uygulamalarının temeli olması

Sonuç olarak, DOM web sayfalarının temel yapısını oluşturan bir yapıdır ve JavaScript ile birlikte kullanılarak etkileşimli ve dinamik içerik oluşturmayı sağlar. DOM, web geliştirme sürecinde önemli bir rol oynar ve zengin kullanıcı deneyimleri yaratmaya imkan verir.