- Katılım
- 17 Ocak 2024
- Mesajlar
- 120.056
- Çözümler
- 15
- Tepkime puanı
- 1
- Puan
- 38
- Web sitesi
- forumsitesi.com.tr
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.
Örneğin, bir HTML belgesi şu şekilde görünebilir:
html
Kodu kopyala
Bu HTML belgesinin DOM yapısı, şöyle bir ağaç şeklinde düzenlenebilir:
less
Kodu kopyala
javascript
Kodu kopyala
Bu örnekte, kullanıcı "myButton" id'sine sahip butona tıkladığında, bir uyarı (alert) mesajı gösterilecektir.
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
Kod:
<span><<span>html</span>></span><br> <span><<span>head</span>></span><br> <span><<span>title</span>></span>Örnek Sayfa<span></<span>title</span>></span><br> <span></<span>head</span>></span><br> <span><<span>body</span>></span><br> <span><<span>h1</span>></span>Başlık<span></<span>h1</span>></span><br> <span><<span>p</span>></span>Bu bir paragraftır.<span></<span>p</span>></span><br> <span></<span>body</span>></span><br><span></<span>html</span>></span><br>less
Kodu kopyala
Kod:
<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
Kod:<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>
- JavaScript ile DOM üzerinden belirli HTML öğelerine (etiketler, başlıklar, paragraflar vb.) erişebilirsiniz.
- HTML İçeriğini Değiştirme:
- DOM kullanarak bir öğenin içeriğini değiştirebilirsiniz.
javascript
Kodu kopyala
Kod:<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>
- DOM kullanarak bir öğenin içeriğini değiştirebilirsiniz.
- Yeni Öğeler Eklemek:
- JavaScript ile sayfaya yeni HTML öğeleri ekleyebilirsiniz.
javascript
Kodu kopyala
Kod:<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>
- JavaScript ile sayfaya yeni HTML öğeleri ekleyebilirsiniz.
- HTML Elemanlarını Silme:
- DOM ile bir HTML öğesini silebilirsiniz.
javascript
Kodu kopyala
Kod:<span>var</span> heading = <span>document</span>.<span>getElementById</span>(<span>"myHeading"</span>);<br>heading.<span>parentNode</span>.<span>removeChild</span>(heading);<br>
- DOM ile bir HTML öğesini silebilirsiniz.
- CSS ile Stilleri Değiştirme:
- JavaScript, DOM üzerinden sayfa stilini değiştirmeye de imkan tanır.
javascript
Kodu kopyala
Kod:<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>
- JavaScript, DOM üzerinden sayfa stilini değiştirmeye de imkan tanır.
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
Kod:
<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>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.