Document Object Model Nedir?

Document Object Model Nedir?

Document Object Model yani daha çok bildiğimiz kısaltması ile DOM’un dilimizdeki karşılığı ise Belge Nesne Modelidir.  Programa dilleri ile karşımıza çıkar ancak DOM bir dil olarak tanımlanmaz. Kısa ir tanım yapmak gerekirse; dilleri barındıran bir standart olarak tanımlayabilirim. HTML, XML ya da diğer programlama dilleri, script dilleri arasında iletişimi sağlayan bir arabirim olma özelliğine sahiptir. HTML sayfasında bulunan etiketler diğer bir ismi ile tagler DOM yapısının kapsamasında yer alır. Aslında HTML gibi dillere hakim olanlarımızın sürekli gördüğü bu etiket yapılarının bir adı da diyebiliriz. <head>, <body> gibi etiketler örneğin, sürekli gördüğümüz ve aşina olduğumuz tanımlardır. Bu nesneler birer DOM nesneleri olarak karşımıza çıkıyor.

Document Object Model

Document Object Model Hangi Dillere Destek Verir?

HTML bir dil olma özelliği taşımıyor. Tabi ki DOM için ilk akla gelen örnekler HTML içerisinde yer alıyor. XML de bir dilden daha çok bir işaretleme dili olarak tanımlanmaktadır. Document Object Model yani DOM aşağıda listelediğim ve tam anlamıyla birer programa dili olarak bildiğimiz dillere destek vermektedir;

  • HTML
  • Javascript
  • PHP
  • ASP
  • Java

Document Object Model HTML Dosyasında Neler Yapabilir?

ID, name ve class gibi parametreler ile DOM nesneleri ile bağlantılar kurulabilir. Yazmış olduğum bu parametreler sayesinde ilgili elemente hızlı bir şekilde ulaşım sağlayabilir ve işlemlerinizi gerçekleştirebilirsiniz. Bu kurulan ağ sayesinde HTML öğelerini ve niteliklerini değiştirebilirsiniz. Sayfanızda yer alan CSS stillerinin değişmesi de DOM ile yapılmaktadır. Aynı zamanda sayfaya yeni HTML öğeleri ekleyebilir, tüm öğelerin niteliklerini kaldırabilir, yeni özellikler ekleyebilir ve yeni events etkinlikleri ekleyebilirsiniz. Document Object Model’de hazırlamış olduğunuz HTML sayfa; belge olarak adlandırılır ve belge içerisinde yerleşmiş olan her öğe ise nesne olarak adlandırılmaktadır.

DOM için en önemli bilgilerden bir tanesi de kullanılan dilin DOM yapılarına bağlı olması gerekir. Aslında DOM içinde bir bağlayıcı diyebiliriz. Ağaç dizini gibi sayfadaki tüm dokümanları birbirine bağladığımızı düşünebiliriz. Tabi ki tanımları arasında yukarıda söylediğim gibi element ve içerikleri silme ya da ekleme gibi fonksiyonları vardır. JQuery’in iyi bir şekilde anlaşılması içinde DOM mantığını net bir şekilde kavramak önemlidir.

Document Object Model Nedir?

Document Object Model Hakkında Temel Bilgiler

  • Document Object Model içerisinde tüm HTML etiketleri bir nesne olarak oluşturulmaktadır.
  • JavaScript kullanarak tüm HTML – DOM ağacına ulaşmanız mümkündür.
  • İçerik ve elementler için silme ve ekleme fonksiyonlarını kullanabilirsiniz.
  • innerHTML metodu  en çok kullanılan, etiket içeriğini almak ya da değiştirmek için kullanılmaktadır.
  • HTML etiketlerinden birine erişmek için kullanılan en sık metotlardan biri getElementById

getElementById kullanım örneği;

<p id="birinci"> ilk paragraf</p>
<p name="yazar">ikinci pragraf</p>
<p>üçüncü paragraf</p>
<p>dördüncü paragraf</p>
<script>
var nesne= document.getElementById("birinci");
console.log(nesneler);
</script>

CEVAP VER

Please enter your comment!
Please enter your name here