TaggetElementById

Javascript DOM Element İşlemleri

Bir önceki yazımda bahsetmiş olduğum Javascript DOM Fonksiyonları yazısının devamı niteliğinde Javascript DOM Element İşlemleri yazısını yazmaya karar verdim.

Bu yazımda bahsedeceğim fonksiyonlardan bahsetmek gerekirse

  • ID’ye göre element bulma
  • Etiket adına göre element bulma
  • Class özelliğine göre element bulma
  • CSS Selector ile element bulma

ID’ye göre Element Bulma

ID’ye göre element bulma işleminden aslında Javascript ile DOM İşlemleri konusunda bahsetmiştim ama hine de bahsetmek gerekiyor.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p id=”demo”>Aydın Can Altun</p>

<script>

var demo = document.getElementById(“demo”);

</script>

</body>

</html>


Bu örnekte kullandığımız getElementById fonksiyonunun girilen değere sahip elementi geri döndürür. Bu fonksiyonunun genel bir kullanımından bahsetmek gerekirse.

var myElement = document.getElementById(id);

Etiket Adına göre Element Bulma

Etiket adına göre element bulma işleminde kullanacağımız fonksiyon getElementsByTagName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p>Etiket Adına göre Element Bulma</p>

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

<p>getElementsByTagName</p>

<script>

var pElements = document.getElementsByTagName(“p”);

</script>

</body>

</html>

Bu örnekte de gördüğünüz gibi getElementsByTagName() fonksiyonunu kullanarak etiket adına göre elementleri çekebiliriz. Bu fonksiyon bize bir dizi döndürür ve o sayfadaki tüm elementleri belirtilen etikete göre yukarıdan aşağıya doğru sıralar. Bu fonksiyonun basit kullanımından bahsetmek gerekirse

var elements = document.getElementsByTagName(tagName);

Class Özelliğine göre Element Bulma

Class özelliğine göre element bulma işleminde kullanıcağımız fonksiyon getElementsByClassName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<div id=”demo”>

<h5 class=”aydin”>Class Özelliğine göre Element Bulma</h5>

<p class=”aydin”>Aydın Can Altun</p>

</div>

<script>

var demo = document.getElementById(“demo”);

var className = demo.getElementsByClassName(“aydin”);

</script>

</body>

</html>

Bu örnekte iki adet fonksiyon kullandık. Önce getElementById fonksiyonu ile id değeri demo olan elemente ulaşıyoruz daha sonra getElementByClassName fonksiyonu ile id değeri ile ulaştığımızdan elementin içinde class özelliği aydin olan elementleri bir dizi halinde geri döndürmesini sağlıyoruz.

var className = document.getElementsByClassName(className);

CSS Selector ile Element Bulma

Eğer bazı CSS özelliklerine göre kısıtlayacak şekilde element bulma işlemi yapmak istiyorsak CSS Selector kullanmamız gerekiyor. Burada querySelectorAll fonksiyonunu kullanacağız.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p class=”demo”>CSS Selector ile Element Bulma</p>

<p class=”demo”>Aydın Can Altun</p>

<p>Deneme</p>

<script>

var selector = document.querySelectorAll(“p.demo”);

</script>

</body>

</html>

Yukarıda ki örnekte 3 adet p elementimiz mevcut ve querySelectorAll fonksiyonu ile class özelliği demo olan tüm p elementlerini seçmesini sağladık. querySelectorAll fonksiyonu bize class özelliği demo olan tüm p elementlerini bize bir dizi olarak göndericek yani

console.log(selector[0]);

console.log(selector[1]);

Bu kodları yazarsak önce CSS Selector ile Element Bulma yazısını içinde barındıran p elementini bize döndürürken daha sonra Aydın Can Altun yazanı döndürecektir ama eğer bu dizinin içinde başka bir eleman var mı diye bakarsak hata ile karşılaşırız. Çünkü class özelliği demo olan 2 adet p elementimiz bulunmaktadır yaptığımız sorguda içinde Deneme yazan p elementi dahil olmayacaktır.

Bu yazımda bir önceki Javascript yazım olan Javascript DOM Fonksiyonlarının ilk kısmı olan HTML Elementleri Bulma kısmını anlatmış oldum. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayınız.

Javascript ile DOM İşlemleri

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.