HTML DOM Nedir? Neden Gereklidir?

HTML DOM Nedir?

HTML Belge Nesne Modeli (DOM(Document Object Model)), HTML ve XML (Genişletilebilir biçimlendirme dili) belgeleri için bir programlama arabirimidir. Belgelerin mantıksal yapısını ve bir belgeye nasıl erişildiğini ve değiştirildiğini tanımlar.

Not: DOM, nesneler arasında herhangi bir ilişki belirtmediği için mantıksal yapı olarak adlandırılır. 

DOM, programcıların ve kullanıcıların belgede gezinmesini kolaylaştırmak için web sayfasını yapılandırılmış hiyerarşik bir şekilde temsil etmenin bir yoludur. DOM ile Document nesnesi tarafından sağlanan komutları veya yöntemleri kullanarak etiketlere, kimliklere, sınıflara, niteliklere veya öğelere kolayca erişebilir ve bunları değiştirebiliriz.

HTML DOM Neden Gereklidir?

HTML, web sayfalarını yapılandırmak için kullanılır. Javascript ise web sayfalarımıza davranış eklemek için kullanılır. Tarayıcıya bir HTML dosyası yüklendiğinde, javascript HTML belgesini doğrudan anlayamaz. Böylece ilgili bir belge oluşturulur. DOM, temelde aynı HTML belgesinin, ancak nesnelerin kullanımıyla farklı bir biçimde temsil edilmesidir. Javascript, DOM’i kolayca yorumlar. Yani javascript, HTML belgesindeki etiketleri (<h1>H</h1>) anlayamaz, ancak DOM’deki h1 nesnesini anlayabilir. Artık Javascript, nesnelerin her birine (h1, p, vb) farklı işlevler kullanarak erişebilir.

DOM’un Yapısı: DOM, bir Ağaç veya Orman (birden fazla ağaç) olarak düşünülebilir. Yapı modeli terimi bazen bir belgenin ağaç benzeri temsilini tanımlamak için kullanılır. DOM yapı modellerinin önemli bir özelliği yapısal olmasıdır. Aynı belgenin bir temsilini oluşturmak için herhangi iki DOM uygulaması kullanılırsa, tam olarak aynı nesneler ve ilişkilerle aynı yapı modelini oluştururlar.

Var olan birkaç DOM var. Aşağıdaki bölümler, bu DOM’lerin her birini ayrıntılı olarak açıklar ve bunları belge içeriğine erişmek ve değiştirmek için nasıl kullanabileceğinizi açıklar.

  • Eski DOM – Bu, JavaScript dilinin ilk sürümlerinde tanıtılan modeldir. Tüm tarayıcılar tarafından iyi bir şekilde desteklenir, ancak yalnızca formlar, form öğeleri ve resimler gibi belgelerin belirli önemli bölümlerine erişime izin verir.
  • W3C DOM – Bu belge nesne modeli, tüm belge içeriğine erişim ve değişiklik yapılmasına izin verir ve World Wide Web Konsorsiyumu (W3C) tarafından standartlaştırılmıştır. Bu model hemen hemen tüm modern tarayıcılar tarafından desteklenmektedir.
  • IE4 DOM – Bu belge nesne modeli, Microsoft’un Internet Explorer tarayıcısının 4. Sürümünde tanıtıldı. IE 5 ve sonraki sürümleri, çoğu temel W3C DOM özelliği için destek içerir.

Belge Nesnesi Yöntemleri

  • write (“string”): Verilen dizeyi belgeye yazar.
  • getElementById() : Verilen kimlik değerine sahip öğeyi döndürür.
  • getElementsByName() : Verilen ad değerine sahip tüm öğeleri döndürür.
  • getElementsByTagName(): Verilen etiket adına sahip tüm öğeleri döndürür.
  • getElementsByClassName() : Verilen sınıf adına sahip tüm öğeleri döndürür.

Yazı gezinmesi

Mobil sürümden çık