JAVASCRIPT SEÇİCİLERİ

Selamlar..

Javascript ile sayfadaki elemanlar üzerinde işlemler gerçekleştirebilmek için öncelikle onlara ulaşmamız gerekiyor. Bunu,  elemanların Class adları , Id değerleri  yada doğrudan  etiket adlarını  kullanarak yapabildiğimiz gibi genel seçiciler kullanarak ta yapabiliyoruz.

getElementById("id")  Id ile ulaşmak

Elemana  "id" değerlerini kullanarak ulaşmamızı sağlar. Elemanın id değeri tırnak içerisinde "#" işareti kullanılmadan yazılır. Id, tek değer olduğu için sayfadaki sadece bir elemana ulaşılmış olur. 

<div id="box"> Lorem Ipsum </div>

document.getElementById("box")
//  sayfadaki "box" id'li div'e ulaşmamızı sağlar..

document.getElementById("box").style.color="red";
// div'in yazı rengi kırmızı olur..
// 

Yapılan tanımları bir değişkenede aktarabiliriz.

myDiv=document.getElementById("box")
// myDiv değişkeni ile  sayfadaki "box" id'li div'e ulaşmamızı sağlar.. 

myDiv.style.color="red";
// div'in yazı rengi kırmızı olur..

getElementsByClassName("class")   

Elemanlara  "class" isimleriyle  ulaşmamızı sağlar. class ismi tırnak içerisinde "." işareti kullanılmadan yazılır. "class" sayfada  birden fazla kullanılabildiği için, sbu classs'ı alan tüm elemanlar seçilir ve dizi içerisine alınır. Dolayısyla tek bir eleman üzerinde işlem yapabilmek için indis numarasını belirtmemiz  yada tümü üzerinde işlem yapabilmek için döngü kurmamız  gerekecektir. Bildiğiniz gibi dizi eleman indisleri 0'dan başlar .. 

<div class="mini"> Lorem Ipsum </div>
<p class="mini"> Lorem Ipsum </p>
<span class="mini"> Lorem Ipsum </span>

Yukarıda aynı class'a sahip 3 farklı html elemanına getElementsByClassName ile ulaşalım.

tags=document.getElementsByClassName("mini");
//  sayfadaki "mini" class'lı tüm elemanlar "tags" değişkenine , dizi olarak aktarılıyor.

tags[0].style.color="red";
// dizinin ilk elemanı (0.indis) DIV'in yazı rengi kırmızı olur..

tags[1].style.color="green";
// dizinin 2. elemanı (1.indis)  P'in yazı rengi yeşil olur..

tags[2].style.color="blue";
// dizinin 3. elemanı (2.indis)  SPAN'ın yazı rengi mavi olur..

tags değişkeni ile tüm "mini" class'ı olan  elemanlar dizi içerisine alınıyor. Dolayısıyla  3 elamanlı bir dizimiz oluyor. Bu durumda dizi indisleri "0" dan başladığı için;

1. eleman DIV            0.indis;

2. eleman P                1. indis 

3. eleman SPAN         2. indis olacaktır.

İnds numarasınıu köşeli parantezler çerisinde belirterek istediğimiz eleman üzerinde işlem yapabiliriz. Örnekte elemanların css özelliği değiştirilerek farklı yazı renkleri verildi. Eğer farklı özellikler verceksek , bu şeklde kullanamk durumundayız ancak , tümüne aynı özelliği vereceksek  , yada üzerlerinde aynı işlemi yapacaksak for föngüsü kullanabiliriz. Örneğin tüm "mini" class'lı elemanları yazı rengini bordo yapalım. Bu durumda tüm elemanları indislerle ayrı ayrı belirtmek yerine , for döngüsü  kullanacağız. Burada toplam 3 elamanımız var ama sayfada 100 tane aynı class'lı elemanda olabilirdi. Öncelikle bu sayıyı bulmamız gerekiyor. Bunuda dizilerin length (uzunluk,eleman sayısı) özelliğiyle yaparız. 

tags=document.getElementsByClassName("mini");
//  sayfadaki "mini" class'lı tüm elemanlar "tags" değişkenine , dizi olarak aktarılıyor.

dizi_eleman_sayisi=tags.length;   // dizi uzunluğu (eleman sayısı) değişkene aktarılıyor.. 

Artık dizideki eleman sayısı "dizi_eleman_sayisi" değişkeninde olduğuna göre for döngüsünü kurabiliriz.

for(i=0;i<dizi_eleman_sayisi;i++) {
     tags[i].style.color="#933";
}

For döngüsü, i=0'dan başlayarak dizinin  eleman sayısından bir az olacak şekilde dönecek ve tüm elemanlara tek tek bordo  yazı rengini verecektir.. Peki i'yi neden 0'dan başlattık?  Düşünelim..

getElementsByTagName("etiket")   

Sayfadaki etiketlere ulaşmamızı sağlar. Etiket ismi tırnak içerisinde  yazılır. Etiketler sayfada  birden fazla kullanılabildiği için,  tüm etiketler seçilir ve dizi içerisine alınır. Dolayısyla tek bir etiket üzerinde işlem yapabilmek için indis numarasını belirtmemiz  yada tümü üzerinde işlem yapabilmek için döngü kurmamız  gerekecektir.  

<p> 1. Paragraf  </p>
<p> 2. Paragraf  </p>
<p> 3. Paragraf  </p>

Yukarıda 3 farklı "P" etiketine getElementsByTagName ile ulaşalım.

tags=document.getElementsByTagName("p");
//  sayfadaki  tüm "p" etiketleri  "tags" değişkenine , dizi olarak aktarılıyor.

tags[0].style.color="red";
// dizinin ilk elemanı (0.indis) 1. Paragrafın yazı rengi kırmızı olur..

tags[1].style.color="green";
// dizinin 2. elemanı (1.indis) 2. Paragrafın yazı rengi yeşil olur..

tags[2].style.color="blue";
// dizinin 3. elemanı (2.indis) 3. Paragrafın yazı rengi mavi olur..

tags değişkeni ile tüm "p" etiketleri dizi içerisine alınıyor. Dolayısıyla  3 elamanlı bir dizimiz oluyor. Bu durumda dizi indisleri "0" dan başladığı için;

1. P etiketi              0.indis;

2. P etiketi              1.indis;

3. P etiketi              2.indis;

İndis numarasını köşeli parantezler çerisinde belirterek istediğimiz eleman üzerinde işlem yapabiliriz. Örnekte elemanların css özelliği değiştirilerek farklı yazı renkleri verildi. Eğer farklı özellikler verceksek , bu şeklde kullanamk durumundayız ancak , tümüne aynı özelliği vereceksek  , yada üzerlerinde aynı işlemi yapacaksak for föngüsü kullanabiliriz. Örneğin sayfadaki tüm  "P" etiketlerinin yazı rengini bordo yapalım. Bu durumda tüm elemanları indislerle ayrı ayrı belirtmek yerine , for döngüsü  kullanacağız. Burada toplam 3 elamanımız var ama sayfada 100 tane aynı class'lı elemanda olabilirdi. Öncelikle bu sayıyı bulmamız gerekiyor. Bunuda dizilerin length (uzunluk,eleman sayısı) özelliğiyle yaparız. 

tags=document.getElementsByTagName("p");
//  sayfadaki "p" etiketleri  "tags" değişkenine , dizi olarak aktarılıyor.

dizi_eleman_sayisi=tags.length;   // dizi uzunluğu (eleman sayısı) değişkene aktarılıyor.. 

Artık dizideki eleman sayısı "dizi_eleman_sayisi" değişkeninde olduğuna göre for döngüsünü kurabiliriz.

for(i=0;i<dizi_eleman_sayisi;i++) {
     tags[i].style.color="#933";
}

For döngüsü, i=0'dan başlayarak dizinin  eleman sayısından bir az olacak şekilde dönecek ve tüm "p" etiketlerine tek tek bordo  yazı rengini verecektir..  

querySelector("etiket,class,id..")  

Sayfadaki etiketlere,class'lara yada id değeri verilen elemanlara ulaşmamızı sağlar. Birden fazla olması durumunda sadece ilk elemana ulaşılmış olur. Yani querySelector sadece bir elemana ulaşır.  Class ve Id değerleri yazıldığında başlarına "." yada "#" işaretleri konulmalıdır.

tag=document.querySelector("p");
//  sayfadaki  ilk "p" etiketi  "tag" değişkenine aktarılır.

tag=document.querySelector(".mini");
//  sayfadaki  ilk "mini" class'lı eleman "tag" değişkenine aktarılır.

tag=document.querySelector("#box");
//  sayfadaki "box" id'li eleman "tag" değişkenine aktarılır.

 

querySelector ile İç içe elemanlara da ulaşabilriiz. Elemanlar parantez içerisinde yazılırken aralarında bir boşluk bırakılır. Örneğin "box" id'i bir div içerisindeki "mini" class'lı ilk eleman üzrrinde işlem yapalım..

<div id="box>
   <h1 class="mini">Başlık </h1>
   <p class="mini">Paragraf</p>
   <div class="mini"> Div </div>
</div>

dom=document.querySelector("#box .mini");
//  sayfadaki  "box" id'li div içindeki ilk "mni" class'lı  eleman olan "<h1>"  dom değişkenine aktarılır.

dom.style.color="red";
// h1 etiketinin yazı rengi kırmızı olur.

querySelector("#box .mini") ifadesi ,  #box id'li eleman içerisindeki ilk "mini" class'lı elemanı seçmemizi sağlar.  Örnekte h1 etiketine ulaşılmış ve yazı rengi kırmızı yapılmış olur.

querySelectorAll("etiket,class,id..")   

querySelector'dan farkı, sadece ilk elemana değil , tüm elemanalara ulaşmasıdır. Sayfadaki etiketlere,class'lara yada id değeri verilen elemanlara ulaşmamızı sağlar. Birden fazla olması durumunda, getElementsByClassName ve getElementsByTagName seçicilerinde olduğu gibi bir dizi oluşturulur.. Dolayısyla tek bir etiket üzerinde işlem yapabilmek için indis numarasını belirtmemiz  yada tümü üzerinde işlem yapabilmek için döngü kurmamız  gerekecektir.   querySelectorAll'da seçici belirtilirken yine querySelector'da olduğu gibi Class ve Id değerleri yazıldığında başlarına "." yada "#" işaretleri konulmalıdır.

<p> 1. Paragraf  </p>
<p> 2. Paragraf  </p>
<p> 3. Paragraf  </p>

Yukarıda 3 farklı "P" etiketine querySelectorAll ile ulaşalım.

tags=document.querySelectorAll("p");
//  sayfadaki  tüm "p" etiketleri  "tags" değişkenine , dizi olarak aktarılıyor.

tags[0].style.color="red";
// dizinin ilk elemanı (0.indis) 1. Paragrafın yazı rengi kırmızı olur..

tags[1].style.color="green";
// dizinin 2. elemanı (1.indis) 2. Paragrafın yazı rengi yeşil olur..

tags[2].style.color="blue";
// dizinin 3. elemanı (2.indis) 3. Paragrafın yazı rengi mavi olur..

tags değişkeni ile tüm "p" etiketleri dizi içerisine alınıyor. Dolayısıyla  3 elamanlı bir dizimiz oluyor. Bu durumda dizi indisleri "0" dan başladığı için;

1. P etiketi              0.indis;

2. P etiketi              1.indis;

3. P etiketi              2.indis;

İndis numarasını köşeli parantezler çerisinde belirterek istediğimiz eleman üzerinde işlem yapabiliriz. Örnekte elemanların css özelliği değiştirilerek farklı yazı renkleri verildi. Eğer farklı özellikler verceksek , bu şeklde kullanamk durumundayız ancak , tümüne aynı özelliği vereceksek  , yada üzerlerinde aynı işlemi yapacaksak for föngüsü kullanabiliriz. Örneğin sayfadaki tüm  "P" etiketlerinin yazı rengini bordo yapalım. Bu durumda tüm elemanları indislerle ayrı ayrı belirtmek yerine , for döngüsü  kullanacağız. Burada toplam 3 elamanımız var ama sayfada 100 tane aynı class'lı elemanda olabilirdi. Öncelikle bu sayıyı bulmamız gerekiyor. Bunuda dizilerin length (uzunluk,eleman sayısı) özelliğiyle yaparız. 

tags=document.querySelectorAll("p");
//  sayfadaki "p" etiketleri  "tags" değişkenine , dizi olarak aktarılıyor.

dizi_eleman_sayisi=tags.length;   // dizi uzunluğu (eleman sayısı) değişkene aktarılıyor.. 

Artık dizideki eleman sayısı "dizi_eleman_sayisi" değişkeninde olduğuna göre for döngüsünü kurabiliriz.

for(i=0;i<dizi_eleman_sayisi;i++) {
     tags[i].style.color="#933";
}

For döngüsü, i=0'dan başlayarak dizinin  eleman sayısından bir az olacak şekilde dönecek ve tüm "p" etiketlerine tek tek bordo  yazı rengini verecektir..  

querySelector ve querySelectorAll seçicilerini joker seçiciler olarak düşünebilriiz. Class , Id yada etiketi doğrudan seçebilirler!!

Saygılar, sevgiler...