Forumda yenilikler devam etmektedir , çalışmalara devam ettiğimiz kısa süre içerisinde güzel bir görünüme sahip olduk daha iyisi için lütfen çalışmaların bitmesini bekleyiniz. Tıkla ve Git
x

Son konular

DOM (Document Object Model) Nedir?

DOM (Document Object Model) Nedir?
0
195

uydukurdu

FD Üye
Katılım
Ocak 2, 2023
Mesajlar
53
Etkileşim
5
Puan
8
Yaş
46
F-D Coin
143

DOM (Document Object Model) Nedir?​

DOM’u Tanıyalım​

Document Object Model kısaca DOM, web sayfalardaki verilerin ve yapıların bir nesne tabanlı modelidir. XML tabanlı markup dilleri için geliştirilmiş bu yapı karşımıza en çok HTML ile birlikte çıkıyor. DOM sayesinde Javascript gibi diller web sayfalardaki elemanlarla etkileşim kurarak web sayfaların ve web tasarımların daha dinamik hale getirilmesine olanaklar sağlıyor.

DOM herhangi bir programlama dili tarafından uyumlu bir şekilde kullanılabildiği için büyük avantajlar sağlar.

CSSOM (CSS Object Model) Nedir, Ne Değildir?​

DOM’dan farklı olarak CSS Object Model yanı kısaca CSSOM, XML dillerinin bir nesne tabanlı modeli olmamakla birlikte ağaç yapısı bir nevi DOM’u andırır. Fakat CSSOM web tasarımların makyajı olarak nitelendirilen CSS’in nesne boyutuna indirgenmiş halidir. DOM’dan farklı bir davranışına örnek vermek gerekirse web sayfa üzerinde herhangi bir görüntüsü oluşturulmayacak elemanlar CSSOM ağacına eklenmezken DOM ağacına eklenir.

DOM ve CSSOM Karşılaştırması​

Bir web tarayıcı yukarıdaki kod ile karşılaştığında her HTML elemanını DOM seviyelerine eklemesine rağmen h1 etiketi web sayfada gözükmeyeceği için CSSOM’a eklenmesine gerek yoktur. Çünkü daha önce de bahsettiğim gibi CSSOM’a ihtiyaç, görünürde bir şeyler olmaya başladığı zaman olur. Peki bu kodun DOM ve CSSOM karşılıklarına bakalım.

  • DOM:
  • html
  • body
  • h1
  • webtasarim34.com
  • CSSOM:
  • html
  • body

DOM Kaynak Kod Değildir!​

DOM, web sayfaların kaynak kodlarının (HTML) daha basit bir hale indirgenmiş bir görüntüsü olduğunu anlatmıştım. Bazen her ne kadar DOM ve web sayfaların kaynak kodları birbirinin aynısı gibi gözükse de temelinde herhangi bir benzerlik mevcut değildir.

Web Tarayıcılardaki Öğeyi Denetle Seçeneği​

Herhangi bir web tarayıcıda F12’ye basarsanız ya da sağ tık yapıp karşınıza çıkan seçeneklerden Inspect Element (Öğeyi Denetle) kısmına tıklarsanız genellikle web tarayıcının sağ tarafında belirmek üzere bir pencerenin açıldığını göreceksiniz. Önünüze birçok farklı seçenek gelecek ama biz burada Elements (Öğeler) bölümünü inceleyeceğiz. Fark ettiyseniz karşınıza HTML ve Javascript hatta bazı CSS kodlarının çıktığını göreceksiniz. Javascript kodları genellikle soluk renklidir. Peki bu gördüğünüz DOM’un kendisi mi?

(Örnekte kullanılacak web tarayıcılardan dolayı öğeyi denetle seçecekleri değişkenlik gösterebilir.)



DOM’un yapısına baktığımızda karşımıza sadece HTML elemanları çıkması gerekiyordu, bizim CSS ve Javascript ile ne alakamız olacak ki dediğiniz an karşınızda görüyor olduğunuz yazıların aslında kaynak kodların sadeleştirilmiş bir biçimi olduğunu rahatlıkla anlayacaksınız. Normalde HTML kodlaması yapılırken bile ::before, ::after gibi ifadeleri görmüyorken burada karşımıza çıkıyor. İşte bu CSS’in bazı selector ya da bir başka deyişle seçici olarak adlandırılan ifadelerinden kaynaklanmaktadır. Bu ifadeler pseudocode (Sahte Kod) olarak da adlandırılır. Sonuç olarak “öğeyi denetle” bize DOM hakkında önemli bilgiler veriyor fakat DOM’un aslını görmüyoruz.

Sor Bakalım​

  1. Dünya Çapında Hangi DOM standartları mevcuttur?​

    Modern web tarayıcılar W3C DOM ve WHATWG DOM standartlarını kullanmanın yanı sıra ekstradan kendi bünyelerinde tanımladıkları standartları da kullanır.
 

Similar threads

Gelişmekte olan web teknolojisiyle birlikte dünyada popülerliği ve kullanım oranı hızla artan javascript kütüphanesi olan Vue.js hakkında bilinmesi gerekenleri bu yazımızda sizlerle paylaştık. Gelişmekte olan web teknolojisiyle birlikte dünyada popülerliği ve kullanım oranı hızla artan...
Cevaplar
0
Görüntüleme
159
DOM Document Object Model kelimesinin kısaltılması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 kurabilmesini sağlamak için geliştirilmiş bir arabirimdir. Programlama dillerinde sıkça karşımıza...
Cevaplar
0
Görüntüleme
475
INDENT 6HTML DOM Nedir?INDENT DOM Document Object Model kelimesinin kısaltılması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 kurabilmesini sağlamak için geliştirilmiş bir arabirimdir Programlama...
Cevaplar
0
Görüntüleme
149
Yazıya başlamadan önce sizleri bir konuda bilgilendirmek istiyorum React, gerçekten geniş yelpazeli bir konu olduğu için bu yazıda React’ın mantığı ve işleyişi üzerine giriş seviyesinde bir yazı ile başlamayı uygun gördüm Ayrıca eğer karşınıza daha önce duymadığınız teknik ve İngilizce terimler...
Cevaplar
0
Görüntüleme
347
React JS nedir ? Yazıya başlamadan önce sizleri bir konuda bilgilendirmek istiyorum. React, gerçekten geniş yelpazeli bir konu olduğu için bu yazıda React’ın mantığı ve işleyişi üzerine giriş seviyesinde bir yazı ile başlamayı uygun gördüm. Ayrıca eğer karşınıza daha önce duymadığınız...
Cevaplar
0
Görüntüleme
234
858,536Konular
981,822Mesajlar
32,328Kullanıcılar
Üst Alt