HTML DOM (Document Object Model) Nedir?

2 ay önce , Okuma süresi 3 dakika.

Bugün ki konumuzu incelemeden önce, Object-Orientated programlama hakkında az da olsa bahsetmemiz de fayda olduğunu düşünüyorum. Nesneye yönelik programlamadaki amaç, bilginin nesnel terimler halinde saklanmasıdır.
HTML DOM (Document Object Model) Nedir?

Onları, onun nesnenin nasıl davranacağını belirleyebileceğimiz özelliklerimiz mevcut nesnelere bir çok özellik kazandırabiliriz.

DOM Belge Nesne Modeli İngilizce kısaltıldığından gelir ve Türkçe karşılığı Belge Nesne Modelidir. DOM, HTML, XML gibi belgelerin diğer programlama dilleri veya script dilleriyle iletişim kurabilmesi için bir arabirimdir.

DOM da nesnelerin birer öğe (element) olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir. HTML’deki her bir elamanın birbiri ile hiyearşik bir yapı oluşturması ile oluşur.

Programlama dillerinde sıkça karşımıza çıkan Nesne Yönelimli yaklaşımı da bu yapıya benzerdir. Nesneye Yönelik yaklaşımında kullandığımız nesneler yada sınıflar, DOM yapısına göre bir HTML sayfası içerisinde bulunan yerlerde (tag) vardır.

Eğer istediğin işi internet ile ilgiliyse, mutlaka HTML, HTML DOM ve Javascript terimleri ile çok karşılaşmışsınızdır. Ama onları kimse işine yarayacak kodları alır, kopyalar ve çalıştırır. Gerisine hiç karışmaz. Oysa bir teknolojiinin yapısını ne kadar iyi bilirseniz ona okadar hakim olursunuz ve o da istek isteklerinizi onunla rahatlıkla yerine getirilebilir. Mesela uçakla bir adaya düştünüz, yanınıza da 3 şey alamadınız :) acil olarak da matematiksel bir hesap yapıyorsunuz. Bu sırada yapabilirsiniz iyi bir marangoz iseniz oduna şekil verme teknolojisiisini kullanarak bir abaküs yapar onunla yetinirsiniz. Mekanikçi iseniz uçakdaki metallerle mekanik bir hesap makinesi yapabilir. Elektronikçi iseniz uçakdaki devreleri kullanarak dijital bir hesap makinesi için. Yok bilgisayarcı iseniz aklınıza gelen ilk şey uçağın bagaj bölümünde bir Laptop aranıyor :) Kısacası uğraştığımız teknolojilerin yapısını biliyoruz, sonuca gidiş şeklimizide değiştirilebilir.

Gelgelelim DOM olayına. HTML bir dil değildir, bir arayüzdür. Javascript, VBscript, vs .. ise birer dildir. Programlama dillerinin nesneye yönelik olarak HTML ile anlaşması için HTML'i nesneler bütününe çevirecek bir ara standart olarak. İşte HTML DOM da tam bu bilgisayarda ön plana çıkar.DOM, HTML ile programlama dilleri arasında bir standart bilgisayarda burakların dilleri HTML den bilgi alıp, bilgi verilmesine yardımcı olur. DOM, Nesneler ve özelliklerden oluşan. Herhangi bir metod veya işlem içermez.

Neler yapar?

DOM bir ağaç dizini gibi bütün dokümanları birbirine bağlar. Birden fazla programlama dilleri destekler(JS, PHP, Java, ASP vb.) ve aynı zamanda dosya oluşturmak, elementleri ve içeriklerini silme/ekleme gibi fonsiyonları vardır.

Bir örnek ile daha iyi anlayalım.

<html>
   <head>
       <titte>Yazilim.net</titte>
       <script type="text/javascript">
           document.formAdi.adiniz.value = 'Kadir Yunus Koç';
           document.getElementbyId('memleket').value = 'İstanbul';
       </script>
   </head>
   <body>
       <form name="formAdi" method="post" action="">
           <input type="text" name="adiniz">
           <input type="text" id="memleket">
       </form>
   </body>
</html>

HTML içerisine yerleştirilmiş öğeleri çağırmak için, içinde bulunduğu diğer öğelerin çağrılması bir yöntem iken, bir öğeye bir id vererek bu id üzerinden çağırmak da bir başka yöntemdir.

JavaScript kodumuzun ilk satırında metin kutusunun değeri hiyerarşik olarak çağrılmış ve değiştirilmiştir. İkinci satırda ise hiyerarşik yapı daha az önemsenerek JavaScript içindeki DOM’un temellerinden olan getElementById metodu kullanılmıştır.

Örneklerle Devam edelim.

<html>
  <head>
      <title>Dom örneği | yazilim.net</title>
      <script type="text/javascript">
            function renkDegistir(Obj)
            {
            Obj.style.border='1px solid red';
             }
      </script>
  </head>
  <body>
      <div style="border:solid 1px #333;" onMouseOver="renkDegistir(this)">
          Genç Yazılımcılar
      </div>
  </body>
</html>

1-) Yukarıdaki örnekte bir HTML belgesi içerisine <html>, <head>,<body>, <div> gibi etiketler tanımladık.

2-) <div> etiketi ile Javascript kodumuzun iletişimi için <div> etiketine onMouseOver özelliği tanımladık ve bu özelliği renkDegistir() adında bir Javascript fonksiyonuna (this) ifadesiyle gönderdik.

3-) Javascript kodumuzda Obj parametresi ile hangi etiketten geldiğini belirledik ve o etikete Obj.style.border = ‘1px solid red’ diyerek yeni bir stil kazandırdık.

NOT : Ayrıca, DOM nesnelerine (this) gibi parametre kullanarak iletişim kurabildiğimiz gibi, id, name, class gibi özellikler (attribute) tanımlayarak da yapabiliriz.

Bir başka örnek daha yaparak DOM yapısını daha yakından tanıyalım.

Bu örnekte bir web programlama dili olan PHP’yi kullanalım.

form.html

<html>
  <head>
      <title>PHP ile DOM | Yazilim.net</title>
  </head>
  <body>
<form method="POST" action=”post.php”>
          <input type="text" name="name">
          <input type="text" name="surname">
<input type="submit" value="Gönder">
 </form>
  </body>
</html>

post.php

<?php
if(isset($_POST))
{
    $name = $_POST['name'] ;
    $surname = $_POST['surname'] ;
   echo "Adınız : " .$name." "."Soyadınız :" .$surname ;
} ?>

1-) Yukarıdaki örnekte yine bir HTML belgesi içerisinde bazı etiketler kullandık.

2-) Form etiketi içerisinde iki adet inputumuz var. Bu inputları action post.php ifadesiyle post.php adında bir php dosyasına gönderiyoruz.

3-) post.php dosyasında da inputlardan gelen ifadeleri name özelliğiyle yakalayıp değişkene atıyoruz ve ekrana basıyoruz.

Bu makalemiz ile birlikte genel anlamda DOM nedir sorusuna cevap aramaya çalıştık. İki örnek ile DOM yapısını kullanarak HTML ile javascript ve PHP gibi dillerin haberleşmesini sağladık.

Umarım faydalı bir makale olmuştur bir sonraki yazıda görüşmek dileğiyle..

 

#javascript #html