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.