Bu yazıda DOM, Shadow DOM ve Virtual DOM’u ele alacağız, öncelikle DOM(Document Object Model) tarayıcının yazdığımız html kodunu anlayarak render edebilmesine yardımcı olan standarttır. Bu standart ve aynı şekilde Shadow DOM, W3C(World Wide Web Consortium) tarafından belirlenir.
DOM, HTML yapısını oluşturan elemanların ağaç şeklinde(tree) tarayıcı tarafında tutulmasıdır. DOM Api ise bu yapıya müdahele ettiğimiz fonksiyonlar ve özelliklerdir(properties). Örneğin; h1 tagi içerisinde “hello world” yazan bir basit html sayfamız olduğunu düşünelim. DOM’a yerleştirilen bu tagi veya diğer tagleri DOM Api kullanarak manipüle edebiliriz.
document.querySelector("h1").innerText = "Bye bye world"
Bu özellikler Ecmascript spesifikasyonuna(Javascript standartları) dahil değildir, ayrı bir şekilde “Whatwg” tarafından belirlenir.
Shadow DOM; kendi küçük DOM ağaçlarımızı, DOM içerisinde oluşturmamıza olanak sağlar. Bu küçük ağaçlarımızın kendilerine özel stillendirmeleri ve javascript’i olabilir ki bu bize soyutlama(abstraction) anlamında yardımcı olur. Sayfa kaynaklarını incelerseniz diğer html taglerinden farklı tagler ile karşılabilirsiniz. Örneğin video tagini görüntülediğinizde ses açma kapama butonu, timeline ve kendine has stillendirmesi vardır. Ancak geliştirici konsolunu açıp incelediğinizde sadece video tagini ve video linkini görüntülersiniz. Konsol ayarlarından shadow dom’u görüntülemeyi aktif hale getirirseniz bu tagi inceleyebilir, içerisindeki diğer elementleri ve stillendirmeleri okuyabilirsiniz. Bu yazıda web komponentlerinin detaylarına yer vermeyeceğiz.
Virtual DOM; günümüzde yaptığımız web uygulamalarında sürekli arayüzle etkileşim içerisindeyiz ve DOM manipülasyonları yaparak sayfaları değiştirebiliyoruz ancak bu işlemi direkt olarak yapmak oldukça maliyetli ve performans açısından istemeyen bir durum, modern javascript frameworkleri olabildiğince performanslı çalışmak ve browser farklılıklarını azaltmak için Virtual DOM adı verilen DOM sanallaştırmasını kullanılıyorlar. Bu sayede yapılan her değişiklik doğrudan DOM’u değiştirmeden önce Virtual DOM’a yansıyor ve DOM ile karşılaştırılarak performans iyileştirmesi sağlanıyor.
kaynakça
roadmap.sh – What is DOM, Shadow DOM and Virtual DOM?
Onur Dayıbaşı – Shadow DOM Nedir?
