HTML DOM NEDİR?

Biltek Logo Halka
Biltek Logo Halka
KASIM282019

HTML DOM Nedir?

HTML DOM Nedir?

DOM 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ştirmek için kullanılır.

DOM Yapısı

DOM Yapısını bir ağaç olarak düşünebilirsiniz. En tepede yani kökte HTML etiketi, onun altında ise içerisine yazılmış diğer 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ı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 erişmek için metotları, tüm HTML elementleri için olayları tanımlar. Diğer bir deyişle HTML DOM yeni elementler eklemek, 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 erişim sağlayabilirsiniz. Örnek olarak aşağıdaki kod bloklarında p elementinin içerisindeki 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 ç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 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 nasıl erişebileceğiniz hakkında bazı örnekler verdik:

document. getElementById(id) - Elementi ID'ye göre seçici
document. getElementsByClassName(class) - Sınıfa göre seçici
document. getElementsByTagName(etiket) - Etikete 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.

<html>
<body>

<a href="https://www.google.com.tr" id="link">Google</a>

<script>
  var a = document.getElementById("link");
  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 bulduğu elementleri bir dizi(array) olarak döndürür. Bu sebeple biz 0. yani 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çerisine istediğiniz bir elementi eklemeye yarar.
</script>

</body>
</html>

Yani kısacası DOM HTML dokümanını manipüle etmek, dokümana yeni elementler eklemek, 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(örneğin; React, Vue, Angular) de birçoğu sadece DOM yapısında güncellemeler yaparak, hızlı sayfa geçişleri ve daha hoş bir deneyim sağlar.