HTML DOM Nedir?
[cmsmasters_row][cmsmasters_column data_width=”1/1″][cmsmasters_text]

DOM Nedir?
Document Object Model(Doküman Nesne Modeli)’in kısaltması olan DOM dokümanlara ulaşmak için olan bir W3C standardıdır.DOM dokümandaki nesnelere ulaşmak ve muhtevanını, stilini, yapısını değiştirmek için kullanılır.
DOM Yapısı
DOM Yapısını bir ağaç olarak düşünebilirsiniz. En tepede başka bir deyişle kökte HTML yaftası, onun altında ise içerisine yazılmış diğer etiketler bulunur. Örnek olarak sayfa yapısını DOM istikametinden inceleyelim.
Oo Web Tasarım
Yukarıda gördüğünüz HTML yapısı aslında şu şekildedir:
HTML DOM Nedir?
HTML için kullanılan doküman nesne modelidir. HTML Elementlerini objeler olarak, HTML elementlerinin tüm özelliklerini, HTML elementlerine ulaşmak için metotları, tüm HTML elementleri için olayları tanımlar. Diğer bir söylemle HTML DOM yeni elementler ilave etmek, elementleri değiştirmek veya silmek için kullanılır.
HTML DOM Metotları
HTML DOM metotları elementler üzerinde uygulayabileceğiniz eylemlerdir.HTML DOM özellikleri ise elementlerin değiştirebileceğiniz veya ayarlayabileceğiniz değerleridir.
HTML DOM’a JavaScript ile ulaşım sağlayabilirsiniz. Örnek olarak aşağıdaki kod bloklarında p elementinin içerisindeki metni değiştirdik.

oowebtasarim.com

Bu örnekte document. getElementById bir metod, innerHTML ise bir özelliktir. HTML personellerine ulaşmak için en çok kullanılan yol getElementById metodudur. Bu metot ile dokümanın içinde verdiğimiz id’ye sahip elementi bulup üzerinde işlem yapabiliriz.
HTML DOM Doküman Nesnesi
Doküman nesnesi internet sitenizi temsil eder. Bir HTML elementine ulaşmak için dokümanınıza ulaşmakla başlamanız gerekir. Aşağıda doküman nesnesini kullanarak elementlere nasıl ulaşabileceğiniz ile ilgili bir takım örnekler verdik:
document. getElementById(id) – Elementi ID’ye göre seçicidocument. getElementsByClassName(class) – Sınıfa göre seçicidocument. getElementsByTagName(yafta) – Yaftaya göre seçici
jQuery’de DOM
jQuery kullanarak HTML elementlerini daha kolay manipüle edebilirsiniz. Örnek olarak JavaScript kullanarak bir elementi ID’sine göre almanın jQuery ile farkı aşağıdaki gibidir.JavaScript: document.getElementById(id);jQuery: $(“#id”);
Gördüğünüz gibi jQuery’de bir elementi seçmek JavaScript’te olduğundan daha kısa ve kolaydır.
Örnekler
 
Örnek 1: Bir a elementinin href özelliğini ve içerisindeki yazıyı değiştirelim.

Google

Google
Örnek 2: Bu sefer dokümanımızdaki bir div’e kendimiz JavaScript ile oluşturduğumuz bir p elementini ilave edelim.

Yani hasılı DOM HTML dokümanını manipüle etmek, dokümana yeni elementler ilave etmek, silmek, değiştirmek için kullanılan bir W3C standardıdır. Web arayüzlerin temel iskeleti DOM yapılarıdır. Yeni nesil JS kütüphanelerinin(sözgelimi; React, Vue, Angular) de birçoğu yalnızca DOM yapısında aktüellemeler yaparak, hızlı sayfa geçişleri ve daha hoş bir tecrübe sağlar.

[/cmsmasters_text][/cmsmasters_column][/cmsmasters_row]

Leave Comment

Your email address will not be published. Required fields are marked *