Çarşamba 22 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. DOM (Document Object Model) Nedir?
 DOM (Document Object Model) Nedir?
Arayüz

DOM (Document Object Model) Nedir?

Yazar : Fatih 8 Ağustos 2016 7 Comments

Bugün ki konumuzu incelemeden önce, Object-Orientated programlama hakkında az da olsa bahsetmemiz de fayda olduğunu düşünüyorum. Object-orientated programlamadaki amaç, bilginin nesnel terimler halinde saklanmasıdır. Örneğin, her nesnenin nasıl davranacağını belirleyebileceğimiz özellikler sayesinde nesnelere bir çok özellik kazandırabiliriz.

DOM nedir?

Document Object Model’in kısaltılmışı olan DOM, asla bir dil olmayıp, dilleri barındıran bir standart olarak tanımlanmaktadır.

Programlama dillerinin Object-Orientated olarak HTML ile anlaşması için HTML’i nesneler bütününe çevirecek bir ara standart gereklidir. DOM da tam bu noktada işe el atmaktadır. DOM, HTML ile programlama dilleri arasında bir standart oluşturarak bu dillerin HTML den bilgi alıp, bilgi vermesine yardımcı olur. DOM, Nesneler ve özelliklerden oluşur.

DOM’da HTML ile hazırladığınız sayfa, belge; bu belgenin içine yerleştirdiğiniz her türlü öğe ise nesne olarak adlandırılır.

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.

webmaster-kitchen-html-dom

DOM 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.

Önemli nokta yazdığımız dilin DOM yapılarına bağlı olmasıdır.

 <html>
   <head>
       <titte>Webmaster.Kitchen</titte>
       <script type="text/javascript">
           document.formAdi.adiniz.value = 'Hakan Karataş';
           document.getElementbyId('memleket').value = 'BAYBURT';
       </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.

JQuery’nin iyi anlaşılması için DOM mantığını iyi bir şekilde çözmekte fayda vardır.

Sonuç olarak eğer client-side olarak HTML’e daha fazla hükmetmek istiyorsanız, kullandığınız dil JavaScript, PHP, ASP vb. ne olursa olsun kesinlikle DOM un erişim yöntemlerini çok iyi biliyor olmanız gerekir.

İstifade ettiğimiz kaynaklar

https://en.wikipedia.org/wiki/Document_Object_Model

https://www.w3.org/DOM/#DOMTS

Etiketler: Document Object Model DOM ne işe yarar DOM nedir HTML DOM nedir
Önceki Yazı
Sonraki Yazı

Fatih

author

7 Yorumlar

  • esma ari says:
    30 Aralık 2016 at 16:15

    sade ve anlasilir bir aciklama olmu, tesekkürler

    Reply
  • Ezgi says:
    23 Kasım 2017 at 20:28

    çok işe yarar bilgiler verilmiş, eline sağlık.

    Reply
  • Elif says:
    29 Mart 2018 at 10:03

    İşin temel mantıgını yalın bir dille vermişsiniz emeğinize sağlık
    Happy codes !

    Reply
  • Ceyhun says:
    4 Aralık 2018 at 02:42

    Merhaba ben proqram dillerinin ogernmek ve proqramlar yaratmak istiyorum.
    Hanigi elektron (pdf) kidabi oneriyorsunuz.
    Cevaplarsinin memmun olurum. Tesekkurler!

    Reply
    • Bilal UÇAR says:
      15 Aralık 2018 at 16:46

      Kitap almanıza gerek yok. İnternette fazlasıyla kaynak var zaten 🙂

      Reply
  • uğur says:
    19 Kasım 2020 at 13:54

    Kendime kullanabileceğim bir dukümantasyon hazırlıyorum. Yazınız gayet anlaşılır ve içeriği güzel yazınızdaki resimleri ve içeriği dokümanımda kullanmamda bir sorun olur mu? Çünkü dokümanımı github’a atmayı düşünüyorum. Kullandığım yerleri kaynakçada belirteceğim bu arada.

    Reply
    • Yunus Emre Karabulut says:
      30 Kasım 2020 at 16:23

      Merhaba, kaynak belirterek kullanabilirsiniz.

      Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.