DOM NEDİR NE İŞE YARAR?
DOM “document object model” (belge nesne modeli) nin kısa yazılışıdır. Web tarayıcılar hazırladığınız web sayfasını bir belge olarak kabul eder.Bu web sayfalarında ki (belgedeki) tüm elementler,etiketler tarayıcı tarafından birer nesne olarak kabul edilirler.Bu belge içerisindeki tüm elemanlarda da bir hiyerarşi mevcuttur.
<div><ul><li><h3>yazi</h3></li></ul></div> gibi
Hazırladığınız web sayfanız tarayıcılar tarafından yorumlanırken sayfanızdaki her bir element bir nesne grubu içerisine konur.En basitinden sayfanızda bir resim varsa bu Image nesnesi içerisine konur.Bu image nesnesi içerisinde resimlerde değişiklik düzenleme yapmanızı sağlayacak metodlar bulunur.Yada bir textbox’ın değerini okuyabilir yada değiştirebiliriz.Bu metodlar sayesinde nesne içerisindeki tüm özelliklerin değerlerini okuyabiliriz veya bazı özelliklerin değerlerini değiştirebiliriz.
DOM’un çalışması için HTML yada XML gibi temel bir dile ve Javascript (genelde javascript kullanılır ancak asp,php,jsp,python gibi sunucu taraflı diller de olabilir.) gibi bir işletme diline ihtiyaç vardır.Örneğin php5 in en yeni ve güzel özelliklerinden bir tanesi içerisinde DOM sınıfı barındırıyor olmasıdır.
Web sayfamızın bir belge olarak kabul edildiği, bu belgedeki tüm elemanların birer nesne olarak kabul edildiğini,ve bu elemanlar arasında bir hiyerarşi olduğundan bahsetmiştim.Bu hiyerarşide en üstte “document” bulunur.Ondan sonrada belgemizdeki diğer elemanları temsil eden nesneler gelir.
Örneğin:
document.form.label.value gibi.
Burada document hiyerarşide en üstteki nesnemiz,sonrasında document altında form nesnesi,form nesnesi altında bir label ve en son olarak ta bu label’in özelliği gelir.
Örnek:
belgemizde bir form nesnesi ve bu form nesnesi içerisinde bir texbox nesnesi olduğunu varsayarsak,bu textbox nesnesinin özelliklerine şu şekilde ulaşabiliriz:
<script type=”text/javascript”>document.form.textbox.value=”acikfikir”;</script>
Yukarıda verdiğim örnekte form içerisindeki textbox’ın değerine taglar arasındaki hiyerarşik yapı ile ulaştık.Ancak tag’lara id verdiysek eğer bu id’ler aracılığı ilede nesnelere ve bunların özelliklerine erişebiliriz:
örnek:
<script type=”text/javascript”>var deger=document.getElementById(‘password’).value;</script>
Yukarıda ki örnekte belgemiz içerisinde password id’sine sahip nesnenin özelliklerine getElemenById() medotu ile eriştik.
Eğer istersek bir değişkene, belgemiz içerisindeki nesneleri id leri aracılığı ile atama yaparak daha sonrasında id ile erişmekten kurtulabiliriz.
Örnek:
<script type=”text/javascript”>var pw=$(“#password”);pw.removeClass(“hata”);pw.addClass(“gecerli”);var deger=pw.val();</script>
Yukarıdaki örnekte pw değişkenine password id li nesnemizi atadık.Daha sonra bu değişkenimiz aracılığı ile bu nesnemizin sitil sınıfından “hata” isimli olanı çıkarıp “gecerli” isimli olanı atadık.Daha sonra deger adlı değişkenimize bu nesnemizin değerini atadık.
Eğer istersek bu yolla nesnelerin olaylarına da (event) erişebiliriz.
Örnek:
<script type=”text/javascript”>var pw=$(“#password”);pw.blur(sifreKontrol);pw.keyup(sifreUyarı);</script>
Yukarıdaki örnekte pw değişkenine atadığımız password isimli nesnemizin .blur() ve .keyup() eventlerini yakaladığımızı ve bu eventler gerçekleşirse sifreKontrol,sifreUyarı gibi fonksiyonları tetiklediğimizi görebilirsiniz.
Bu yazı toplam 544 kere görüntülenmiştir.
İlgili Yazılar:
Yazar Hakkında
Yazar: Hasan
Hakkında / İlgi Alanları: Bilgisayar ve bilişim teknolojileri ile alakalı olan her konu ilgimi çekiyor.Zamanımın çocuğunu web geliştiriciliği alıyor.Bunun dışında gömülü sistem programlama ve robotik uygulamaları konularında çalışıyorum.Model uçak yapmak ve uçurmak, amatör roketçilik, amatör teleskop yapımı gibi enterasan hobilerim var.Onur Aktaş ile felsefe yapmak,balık tutmak, off-road beni en çok rahatlatan aktivitelerim :)
Web tasarım konusunda yazımlıcılara baktığımızda daha DOM mantığını bilmeden birşeyler yapmaya çalışan ancak istediği başarıyı elde edemeyen yazılımcılarla karşılaşıyoruz umarım temelin burda yattığını farkederler. Güzel bir yazı olmuş eline sağlık…
var pw=$(“#password”);
pw.removeClass(“hata”);
pw.addClass(“gecerli”);
var deger=pw.val();
Buradaki $(“#password”); kodu getElemenyById yerine mi geçiyor? Ben bunu jQuery’nin getirdiği bir kısayol zannediyordum
Başlangıç için güzel bir yazı olmuş, eline sağlık.
evet getelementbyid nin yaptığı işi yapıyor.Dom zaten bir programlama dili değil bir yaklaşım bu bize her seferinde getelement ile çağırmak yerine bir değişken üzerinden erişmemizi sağlıyor.Ben hep bu şekilde kullanıyordum ve daha sonrasında bunun DOM olarak adlandırıldığını duyunca bayağı bir şaşırmıştım yani hali hazırda kullandığım şeyin bir adı bir şanı varmış
@Emre: sağol kardeşim yorumların benim için çok değerli çok teşekkürler
Emeğiniz için teşekkürler….
Emre Çamalan yorumuna katılıyorum… kesinlikle olayın özünü çok iyi anlatmışsınız … tebrik ederim…