Web Sitelerinin Gizli Kahramanı: DOM'u Anlamak

"DOM", ön uç web tasarımı ve geliştirmesinde çok kullanılan bir terimdir. "Belge Nesne Modeli" anlamına gelir ve web sitelerinin temel bir parçasıdır.

DOM ne kadar önemli olursa olsun, birçok kişi bunu anlamıyor. Aslında, web sitelerini çok fazla şey öğrenmeden yıllarca programlayabilirsiniz. Ancak ön uç teknolojisi ilerledikçe, DOM'yi anlamak daha önemli hale geliyor.

DOM Sözleşmesini Anlamak

Nesne yönelimli programlamada, arayüz adı verilen bir yapı vardır. Bir arayüz kendi başına hiçbir şey yapmaz. Bunun yerine bir sözleşme yaratır. Arayüz sözleşmesinin kurallarına uyduğu sürece her şeyin başka herhangi bir şeyle etkileşime girebileceğini söylüyor.

Bir arayüze sahip olmak, bir programın herhangi bir bölümünün programın diğer bölümleriyle kontrollü ve öngörülebilir bir şekilde etkileşime girmesini sağlar. Arayüz ayrıca, bir programın bir kısmının, arayüzün diğer tarafındaki programın parçası hakkında hiçbir şey bilmese bile, başka herhangi bir bölümle çalışmasını mümkün kılar.

Arayüz, duvarınızdaki bir elektrik prizi gibidir. Voltaj doğru olduğu sürece cihazınızın gücün nereden geldiğini bilmesine gerek yoktur. Köşedeki transformatörün neye güç verdiğini bilmesine gerek yok. Sadece evinize uygun voltajda elektrik göndermesi gerekiyor.

instagram viewer

DOM, web sayfası ile onu oluşturan ve değiştiren kod arasındaki bir arayüz katmanıdır. Bir web sitesini ziyaret ettiğinizde, tarayıcının o web sitesinin DOM'unu nasıl oluşturduğunu görürsünüz. HTML yazarken, aslında DOM'un API'sini (programlama arayüzü) kullanarak programlama yaparsınız.

DOM standardı, adı verilen bir kuruluş tarafından sağlanmaktadır. World Wide Web Konsorsiyumuveya W3C. Yarattılar DOM'u tanımlayan son derece ayrıntılı belgeler standart.

Bu noktada, çok iyi bir iş yapmadıklarını düşünüyor olabilirsiniz. Sonuçta, tarayıcılar arası uyumluluk sorunlarının neden olduğu pek çok sorun var.

Sorun standartta değil. Tarayıcıların kendisinde. Birçok tarayıcı, DOM uygulamalarına W3C standartlarına uymayan işlevler eklemiştir. Bazen bu işlevsellik popüler hale gelir ve DOM standardına uygulanarak diğer tarayıcıları yakalamaya zorlar.

Diğer bir sorun da, bazı kişilerin hala en son DOM standardına sahip olmayan eski tarayıcı sürümlerini kullanmasıdır. Ve bazen tarayıcılar standardı doğru şekilde uygulamaz.

DOM Nasıl Yapılandırılır

DOM'u bir ağaç gibi düşünebilirsiniz. eleman gövdedir ve içindeki tüm elemanlar dallardır. HTML öğelerini bir üst öğenin içine yerleştirdiğinizde, aslında o daldan dallar oluşturursunuz. Her dal için uygun terim "düğüm" dür.

Ağaç yapısı, bir aile ağacı gibi düğümler arasında mantıksal ilişkiler oluşturur. Her düğümün bir ebeveyni ve dallandığı ataları olabilir. Kardeşleri olabilir. Ve düğümlerin çocukları ve torunları olabilir. Bu terimlerle düşünmek, DOM ile etkileşim kurmak için JavaScript ve CSS kullanırken çok yardımcı olur.

HTML, DOM ile Nasıl Etkileşir?

DOM, belge arayüzüyle bir belge nesnesi oluşturularak tanımlanır. HTML kodunuz, bir belge oluşturmanın en doğrudan yoludur. HTML, geleneksel programlama yapmanıza gerek kalmadan belgeyi tanımlamanın basit bir yolunu sunar.

HTML kullanmaya yeni başlıyorsanız, işte Kendinizi tanımak için beş ipucu.

Temel HTML Kodunu Anlamak için 5 Adım

HTML, her web sayfasının bel kemiğidir. Yeni başlayan biriyseniz, HTML'yi anlamaya yönelik temel adımlarda size rehberlik etmemize izin verin.

HTML, geleneksel programlama dillerinden daha basit ve daha bağışlayıcıdır. Yeni başlayan web tasarımcıları için DOM ile etkileşimi kolaylaştırır.

CSS, DOM ile Nasıl Etkileşir?

HTML'niz DOM belgesini yapılandırdıktan sonra, CSS bu belgeye stil uygulayabilir. Bunu yapmak için, stil vermek istediğiniz öğeleri bulabilmesi gerekir. Bunu birkaç şekilde yapar.

Doküman düğümlerine, öğeleri isme göre referans vererek erişebilirsiniz. ve. CSS, öğelere doğrudan referans vererek de erişebilir sınıf ve İD isimler. Sınıf stili birkaç öğeye uygulanır, böylece hepsine aynı anda stil uygulayabilirsiniz. Tersine, kimlik stili değişiklikleri yalnızca tek bir öğeye uygular.

Soy ağacı yapısına CSS ile de erişebilir ve daha fazla kontrol için ince ayar erişimi sağlayabilirsiniz. CSS seçicileri, birden çok öğeyi seçmenize izin verir ve bunları bulmanız için size bir çanta dolusu numara verir. Çocukları soylarına, sınıf kombinasyonlarına ve çok daha fazlasına göre arayabilirsiniz.

JavaScript, DOM ile Nasıl Etkileşir?

JavaScript, belge üzerinde en fazla kontrole sahiptir çünkü JavaScript nesneler, akış kontrolü, değişkenler vb. İçeren gerçek bir programlama dilidir. DOM, JavaScript'in belgeyi, öğeleri ve diğer düğümleri işlemesine olanak tanıyan çeşitli arabirimler sağlar.

İlişkili: JavaScript nedir?

JavaScript, düğümleri ekleyip kaldırabilir ve stillerini değiştirebilir. Ve JavaScript, fareyi bir öğenin üzerine getirmek, tıklamak ve tuşlara basmak gibi belgedeki olayları izleyebilir.

JavaScript, CSS'ye çok benzer bir şekilde belge ağacında arama yapabilir ve gezinebilir. Öğeleri id ve sınıfa göre bulabilir. Ve alt elemanların listelerini diziler olarak alabilir.

Web Geliştirme ve DOM'un Geleceği

İnternet ilk günlerden beri çok değişti. İlk günlerde JavaScript çoğunlukla özel efektler ve basit veri gösterimleri için kullanılıyordu. Çoğu web sitesi dijital broşürlerden çok daha fazlası değildi. AJAX tüm bunları değiştirdi.

AJAX, web sitelerinin sayfayı yeniden yüklemeden bir sunucudan görüntülenen verileri anında güncellemesine izin verir. AJAX'tan önce, verilerdeki her değişiklik yalnızca sayfa yeniden yüklendiğinde veya kullanıcı başka bir sayfaya gittiğinde görülebiliyordu.

AJAX'tan sonra web uygulamaları giderek daha popüler hale geldi. İnternet artık basit statik web sitelerinden ve eBay gibi birkaç yüksek işlevsellikli uygulamadan oluşan bir koleksiyon değildir. Artık internet, oldukça işlevsel uygulamalarla dolu neredeyse ikinci bir işletim sistemidir.

Kullanıcıların beklentileri büyüdükçe, teknoloji ayak uydurmalıdır. JavaScript, en güçlü veya en hızlı dil değildir. Ayrıca, onu geliştiriciler için daha az arzu edilen kılan kayan noktalı sayı hataları gibi bir dizi sorundan muzdariptir. WebAssembly burada devreye giriyor.

WebAssembly, gelişmiş hız ve daha iyi donanım erişimi dahil olmak üzere yerel kodun birçok avantajını tarayıcıya getirir. Programcıların C ++ ve Rust gibi web siteleri oluşturmak için diğer dilleri kullanmasına izin verecek.

Ancak, WebAssembly'nin getireceği büyük iyileştirmelerle bile, DOM hala orada olacak ve kod ile tarayıcıda görüntülenenler arasında tutarlı bir arayüz sağlayacak.

Outlook'u Karanlık Modda Kullanma

Microsoft Outlook'u Karanlık moda geçirerek göz yorgunluğunu azaltın ve pil ömrünüzü artırın.

Yazar hakkında