DOM (Document Object Model) ve BOM (Browser Object Model)
Türkçesi döküman nesne modeli olan DOM asalında bir internet sayfası içerisine bulunan HTML etiketlerini manipüle edebilmemizi sağlayan W3C standartıdır. Yani DOM un yapısını basitçe kök olarak sayfa oluştururken yazdığımız <html> etiketi i dalları ise diğer html etiketleri olarak düşünebiliriz.
Peki bu etiketleri manipüle etmekden kastımız tam olarak nedir. Frontend development ta olmazsa olmaz dil olan JavaScriptin DOM elemanlarına ulaşımı vardır bunu ise neredeyse her Frontend Development 101 dersinde gördüğümüz bir methodlar yardımıyla gerçekleştirir
document. getElementById(id) — Elementi ID’ye göre seçici. getElementsByClassName(class) — Sınıfa göre seçici getElementsByTagName(etiket) — Etikete göre seçici
bu 3 method sayesinde id sinin ismiyle yada verdiğimiz stillendirme clasının ismiyle yada direk etiketin kendi ismiyle ulaşıp istediğimiz manüpüle işlemlerini gerçekleştirebiliriz.
Örnektede görüldüğü gibi example id li elemanın içindeki text DOM manüpüle edilerek oluşturulmuş. Bu metin elbette statik bir şekilde de oluşturulabilirdi ancak günümüz internet çağı ve bu dataların bir sunucudan geldiği senaryoda kullanım tamda bu şekilde olmaktadır.
Frontend Development için kullanılan neredeyse bütün kütüphaneler bu basit mantığı temel alarak kullanmaktadır. Tabiki orada VDOM gibi kavramlarda hayatımıza giriyor ancak şimdilik o kısımdan bahsetmeyeceğim
BOM (Browser Object Model) yani tarayıcı nesne modeli ise tarayıcı kısmında gördüğünüz herşeyi temsil eder örn BOM DOM u kapsar aslında yukarıdaki örnekteki id ye ulaşma işlemini
window.document.getElementById(“example)
şeklinde de yazabilirdik
Mevcut tarayıcının genişlik ve yükseklik değerlerine ulaşmak isterseniz
window.innerHeight - seçilen elemanın yüksekliği(pixel cinsinden)
window.innerWidth - seçilen elemanın genişliği (pixel cinsinden)
yada bir linke gitmek istediğimizi düşünelim
window.location.href(‘www.somewhere.com’)
yine her JavaScript geliştiricisinin debug yapmasında yardımcı olarak kullandığı 2 method aslında BOM a ne kadar aşina olduğumuzu da gösteriyor tabi biz bu 2 method uda kısaltmalarıyla kullanıyoruz ama aslında bu 2 methodun orjinal hali
window.console.log(‘Hello World’)
window.alert(‘Hello World’)
Örneklerden de anlaşılacağı gibi bütün DOM elementleri aslında BOM un birer parçası
Ayrıştıkları nokta sayfanın içerik kısmında manüpüle işlemler yapmak istiyorsak DOM
Eğer açık sayfa üzerinde tarayıcı kısmının özelliklerine müdahale etmek istiyorsak da yaptığımız işlem BOM manüpilasyonu olarak adlandırılıyor
