HTML DOM Nedir?
OM Nedir?
Document Object Model(Doküman Nesne Modeli)'in kısaltması olan DOM dokümanlara erişmek için olan bir W3C standardıdır.
DOM dokümandaki nesnelere erişmek ve içeriğini, stilini, yapısını değiştirebilmek için kullanılır.
DOM Yapısı
DOM Yapısını bir ağaç olarak düşünebilirsiniz. En tepede doğrusu kökte HTML etiketi, onun altında ise içine yazılmış öteki etiketler bulunur. Örnek olarak sayfa yapısını DOM yönünden inceleyelim.
<html>
<head>
<title></title>
<style></style>
</head>
<body>
<div>
<p>Biltek Tasarım</p>
</div>
</body>
</html>
Yukarıda gördüğünüz HTML yapısı aslına bakarsak ş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 erişmek için metotları, tüm HTML elementleri için vakaları tanımlar. Öteki bir deyişle HTML DOM yeni elementler eklemek, elementleri değişiklik yapmak yada silmek için kullanılır.
HTML DOM Metotları
HTML DOM metotları elementler üstünde uygulayabileceğiniz eylemlerdir.
HTML DOM özellikleri ise elementlerin değiştirebileceğiniz yada ayarlayabileceğiniz değerleridir.
HTML DOM'a JavaScript ile erişim sağlayabilirsiniz. Örnek olarak aşağıdaki kod bloklarında p elementinin içindeki metni değiştirdik.
<html>
<body>
<p id="metin">biltektasarim.com</p>
<script>
document.getElementById("metin").innerHTML = "Değiştirilmiş Metin!";
</script>
</body>
</html>
Bu örnekte document. getElementById bir metod, innerHTML ise bir özelliktir. HTML elemanlarına erişmek için en oldukça kullanılan yol getElementById metodudur. Bu yöntem ile dokümanın içinde verdiğimiz id'ye haiz elementi bulup üstünde işlem yapabiliriz.
HTML DOM Doküman Nesnesi
Doküman nesnesi web sitenizi temsil eder. Bir HTML elementine erişmek için dokümanınıza erişmekle başlamanız gerekir. Aşağıda doküman nesnesini kullanarak elementlere iyi mi erişebileceğiniz hakkında bazı örnekler verdik:
document. getElementById(id) - Elementi ID'ye nazaran seçici
document. getElementsByClassName(class) - Sınıfa nazaran seçici
document. getElementsByTagName(etiket) - Etikete nazaran seçici
jQuery'de DOM
jQuery kullanarak HTML elementlerini daha kolay manipüle edebilirsiniz. Örnek olarak JavaScript kullanarak bir elementi ID'sine nazaran almanın jQuery ile farkı aşağıdaki gibidir.
JavaScript: document.getElementById(id);
jQuery: $("#id");
Gördüğünüz şeklinde jQuery'de bir elementi seçmek JavaScript'te olduğundan daha kısa ve kolaydır.
Örnekler
Örnek 1: Bir a elementinin href hususi durumunu ve içindeki yazıyı değiştirelim.
<html>
<body>
<a href="https://www.google.com.tr" id="bağlantı">Google</a>
<script>
var a = document.getElementById("bağlantı");
a.href = "https://www.biltektasarim.com";
a.innerHTML = "Biltek Tasarım";
</script>
</body>
</html>
Örnek 2: Bu sefer dokümanımızdaki bir div'e kendimiz JavaScript ile oluşturduğumuz bir p elementini ekleyelim.
<html>
<body>
<div class="div"></div>
<script>
var div = document.getElementsByClassName('div')[0]; //Burada getElementsByClassName bulmuş olduğu elementleri bir takım(array) olarak döndürür. Bu sebeple biz 0. doğrusu ilk elemanını alıyoruz.
var p = document.createElement('p'); //createElement() element oluşturmak için kullandığımız kod.
p.innerHTML = "Biltek Tasarım";
div.appendChild(p); //AppendChild kodu bir elementin içine istediğiniz bir elementi eklemeye yarar.
</script>
</body>
</html>
Şu demek oluyor ki kısacası DOM HTML dokümanını manipüle etmek, dokümana yeni elementler eklemek, silmek, değiştirebilmek 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(mesela; React, Vue, Angular) de birçoğu bir tek DOM yapısında güncellemeler yaparak, süratli sayfa geçişleri ve daha hoş bir edinim sağlar.
Yorumlar
Yorum Gönder