Shadow DOM, sanal DOM ve normal DOM arasındaki farklar nelerdir?

Shadow DOM:

• kapsülleme: Ana belge içinde ayrı ve izole bir DOM ağacı oluşturur. Shadow DOM içindeki stil ve betikler varsayılan olarak ana belgeyi etkilemez ve tersi de geçerlidir.
• kapsam: Yeniden kullanılabilir, bağımsız bileşenler oluşturmak için idealdir (örneğin, web bileşenleri).
• render: Tarayıcı Shadow DOM'u doğrudan işler.

Sanal DOM:

• soyutlama: Bellekte JavaScript nesneleri şeklinde DOM'un bir temsilidir.
• fark etme ve yamalama: Çerçeveler (örneğin, React) tarafından güncellemeleri optimize etmek için kullanılır. Durum değiştiğinde, çerçeve yeni bir Virtual DOM sürümü oluşturur, öncekiyle karşılaştırır (diffing) ve yalnızca gerekli değişiklikleri gerçek DOM'a uygular (patching).
• performans: DOM'daki sık güncellemelerde performansı artırır, tarayıcı API'siyle doğrudan etkileşimi en aza indirir.
• tarayıcı özelliği değil: JavaScript seviyesinde uygulanan bir kavramdır, tarayıcının yerel bir özelliği değildir.

Normal DOM (Document Object Model):

• temsil: HTML belgesinin yapısına uygun olarak öğeler, öznitelikler ve metin içeren bir düğüm ağacını temsil eder.
• API: Belge yapısına ve içeriğine erişim ve manipülasyon için API sağlar.
• render: Tarayıcı gerçek DOM'u işler.
• doğrudan manipülasyon: Değişiklikler doğrudan gerçek DOM üzerinde yapılır, bu da çok sayıda güncellemede yavaş olabilir.

Özet Tablo:

Özellik	Shadow DOM	Virtual DOM	Normal DOM
Amaç	Bileşen kapsülleme	DOM güncellemelerini optimize etme	HTML yapısının temsilidir
Doğa	Tarayıcı yerel özelliği	JavaScript'te uygulanan kavram	Tarayıcı yerel yapısı
Yalıtım	Evet, DOM ve CSS seviyesinde	Hayır, sadece bir temsil	Hayır
Etkileşim	Tarayıcı doğrudan etkileşimi	Önce diffing/patching, sonra DOM	Tarayıcı doğrudan etkileşimi
Kullanım	Web bileşenleri	Çerçeveler (React, Vue vb.)	Temel web API