Bu yazımda Javascript ile DOM İşlemlerinin nasıl yapılacağından bahsedeceğim.

Öncelikle DOM, Document Object Model kelimelerinin baş harflerinden oluşan bir kısaltmadır.

DOM, bize Javascript ile

  • tüm HTML Elementlerine ulaşmamızı
  • tüm HTML Elementlerini değiştirme
  • tüm HTML Elementlerin özelliklerini değiştirme ve ya HTML Elementine özellik ekleme
  • tüm HTML Elementlerinin sitil özelliklerini değiştirme ve ya müdahale etme
  • HTML Elementini tamamen silme ve ya başka bir HTML Elementi ile değiştirme
  • Yeni HTML Elementi ekleme ve özelliklerini ayarlama

Bu yazıda bahsedeceğim komutlar

  • getElementById
  • getElementsByTagName
  • getElementsByClassName

getElementById()

getElementById(), body etiketlerimiz içindeki bir id değerine sahip elementi ararken kullanmamız gereken komuttur basit bir yazım kuralı vardır.

HTML Kodumuz

<body>

<div id=”aydin“>

<h5>Aydın Can Altun</h5>

<p>Javascript ile DOM İşlemleri</p>

</div>

</body>

Javascript

document.getElementById(“aydin“);

Yazarsak id değeri aydin olan elementin değerlerini almış olduk ama elimizde değerleri olduğunu bilmiyoruz bunu da console.log komutu ile elde edebiliriz.

console.log(document.getElementById(“aydin“);

Yazarsak öğeyi denetle kısmından konsola girersek

id’si aydin elementin bilgilerini almış olduk. Bunun ile işlemler yapmayı ileriki yazılarımda sizlere bahsedeceğim.

getElementsByTagName()

getElementsByTagName(), bir HTML sayfasındaki olan elementleri biz dizi haline getirip ulaşmamızı sağlar.

HTML

<body>

<div>

<h1>Aydın Can Altun</h1>

<p>DOM, getElementsByTagName() </p>

</div>

<div>

<h2>Aydın Can Altun</h1>

<p>DOM, getElementsByTagName()</p>

</div>

</body>

Javascript

document.getElementsByTagName(“div”);

şeklinde kullanırsak bu div etiketine sahip elementler hakkında bilgiyi almış olduk şimdi bunların ne olduklarını öğrenmek gerekirse hine console.log kullanmamız gerekecek

console.log(document.getElemenstsByTagName(“div”));

şeklinde yazarsak tarayıcımızın konsolunda şöyle bir çıktı görürüz.

şeklinde bir çıktı alırız. Eğer

console.log(document.getElementsByTagName(“div”)[0]);

şeklinde kullanırsak bu sayfadaki en üstteki div elementine erişiriz.

getElementsByClassName()

getElementsByClassName() de hine biraz önce bahsettiğimiz getElementByTagName ile benzer olarak class özelliği aynı olan elementleri bize getiriyor.

HTML

<body>

<div class=”aydin“>

<h1>Aydın Can Altun</h1>

<p>DOM, getElementsByClassName öğreniyoruz</p>

</div>

<p class=”aydin“>Javascript, DOM Öğrenme</p>

Javascript

document.getElementsByClassName(“aydin“);

şeklinde bu class özelliğine sahip elemenlere ulaştık. console.log ile bu verileri görmek istersek.

console.log(document.getElementsByClassName(“aydin”));

yazarsak tarayıcımızın konsolunda elde ettiğimiz değerleri görebiliriz.

şeklinde bir görüntüye sahip oluruz.

Bu yazımda Javascript ile DOM İşlemlerine bir giriş yapmış olduk. İleri ki yazılarımda DOM konusunda daha çok bilgi vermeye devam edeceğim.