HTML5 Selector API

12 Eylül 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

HTML5’in dünyamıza kattığı yeni özelliklerden biri de Selector API. DOM içerisinde elementlere erişimimizi sağlayan çeşitli yöntemlerin dışında artık Selector API’nin sağladığı ek özelliklerle de bu işlemleri çok daha kolay bir şekilde gerçekleştirebileceğiz.

Öncelikle şimdiye kadar kullandığımız ve halen kullanmakta olduğumuz DOM’a ait seçicilere bir göz atıp hatırlayalım. Bunlar, “document” nesnesine bağlı olarak kullandığımız getElementById, getElementByName, getElementByClassName ve getElementByTagName olmak üzere 4 metottan oluşuyor.

Peki bunları nasıl kullanıyoruz? Hatırlayalım..

getElementById: Bir elementin “id” bilgisine göre seçim yapılmasını sağlar ve bir “element” nesne referansı döndürür. Bu sebeple eğer belirtilen “id“ bilgisine sahip eleman bulunamazsa “null” değeri döndürür.

var el = document.getElementById(“eleman”)
el.innerHTML = “Merhaba! getElementById”;

getElementByName: Bir elementin “name” bilgisine göre seçim yapılmasını sağlar. getElementById’den farklı olarak aldığı değer unique/benzersiz bir değer değildir. Bu sebeple document içerisinde belirtilen “name” değerine ait tüm elemanları liste şeklinde geri döndürür. Bu NodeList olarak bir element listesidir. Bu listenin elemanlarına erişim sağlamak için Array/Dizi’lerde kullanıldığı gibi erişim sağlanmalıdır.

elemanGoster = function(){
            var el = document.getElementsByName("eleman");
            var liste = "";
            for (var i=0; i<el.length; i++){
                liste += el[i].value + "\n";
            }
            alert("liste: " + liste);
}

<input type="hidden" name="eleman" value="Eleman 1"/>
<input type="hidden" name="eleman" value="Eleman 2"/>
<input type="hidden" name="eleman" value="Eleman 3"/>
<input type="hidden" name="eleman" value="Eleman 4"/>
<input type="hidden" name="eleman" value="Eleman 5"/>
<input type="button" value="Go!" onclick="elemanGoster()" />

Not: Bu örnekte kullandığımız input elementi yerine “name” attribute’una sahip başka bir elementte kullanabilirsiniz. Fakat Div gibi “name” özelliği bulunmayan elementleri seçemezsiniz.

getElementByClassName: Bir elementin “class” bilgisine göre seçim yapılmasını sağlar. getElementById’den farklı olarak aldığı değer unique/benzersiz bir değer değildir. Bu sebeple document içerisinde belirtilen “class” değerine ait tüm elemanları liste şeklinde geri döndürür. Bu NodeList olarak bir element listesidir. Bu listenin elemanlarına erişim sağlamak için Array/Dizi’lerde kullanıldığı gibi erişim sağlanmalıdır.

elemanGoster = function(){
            var el = document.getElementsByClassName("eleman");
            var liste = "";
            for (var i=0; i<el.length; i++){
                liste += el[i].value + "\n";
            }
            alert("liste: " + liste);
}

<input type="hidden" class="eleman" value="Eleman 1"/>
<input type="hidden" class="eleman" value="Eleman 2"/>
<input type="hidden" class="eleman" value="Eleman 3"/>
<input type="hidden" class="eleman" value="Eleman 4"/>
<input type="hidden" class="eleman" value="Eleman 5"/>
<input type="button" class="Go!" onclick="elemanGoster()" />

getElementByTagName: Bir elementin adına göre seçim yapılmasını sağlar. Örneğin P – Paragraf etiketleri seçilmek isteniyorsa TagName bölümüne “p” girilmesi gerekir. document içerisinde belirtilen “p” etiketlerinin tümü seçilmiş olur. Seçim işlemi elementlere uygulandığından dolayı bu bir nesne listesidir.

boldYap = function(){
            var el = document.getElementsByTagName("p");
            for(i=0;i<el.length;i++)
            {
                el[i].style.fontWeight = 'bold';
            }
}

<p>Merhaba ben 1. P etiketiyim.</p>
<p>Merhaba ben 2. P etiketiyim.</p>
<p>Merhaba ben 3. P etiketiyim.</p>
<input type="button" value="Bold Yap!" onclick="boldYap()" />

Eğer getElementsByTagName içerisinde “p” yerine “*” işareti kullanılırsa doküman içerindeki tüm elementleri ifade eder.

boldYap = function(){
            var el = document.getElementsByTagName("p");
            for(i=0;i<el.length;i++)
            {
                el[i].style.fontWeight = 'bold';
            }
}

<p>Merhaba ben 1. P etiketiyim.</p>
<p>Merhaba ben 2. P etiketiyim.</p>
<p>Merhaba ben 3. P etiketiyim.</p>
<span>Merhaba ben 1. SPAN etiketiyim.</span>
<input type="button" value="Bold Yap!" onclick="boldYap()" />

Bu etiketleri ve kullanım şekillerini detaylıca hatırladıktan sonra gelelim Selector API kullanarak yapacağımız seçimlere.. Bunun için iki yeni ve güçlü seçici komutumuz var. Bunlar querySelector ve querySelectorAll.

querySelector: Seçimlerde tek bir element döndürür.
querySelectorAll: Seçimlerde bir element dizisi geri göndürür.

Şimdi örneklerle bu iki seçiciye bir göz atalım.

<!DOCTYPE html>
<html>
<head>
    <title>Selector API</title>
    <meta charset=”UTF-8”>
    <style type="text/css">
        .kirmizi { color: red; }
        .yesil { color: green; }
    </style>
    <script>
        renkDegistir = function(){
            var elm = document.querySelector("ul li.kirmizi");
            elm.className = "yesil";
            elm.innerHTML = "Yeni Metin";
        }
    </script>

</head>
<body>
    <ul id="takimlar">
        <li class="kirmizi">Beşiktaş</li>
        <li class="kirmizi">Galatasaray</li>
        <li class="kirmizi">Trabzon</li>
        <li class="kirmizi">Bursa</li>
        <li class="kirmizi">Çaykur Rize</li>
    </ul>
    <input type="button" value="Go!" onclick="renkDegistir()" />
</body>
</html>

Yukarıdaki kodumuzda ul-li etiketleri ile listelenmiş ve her birinde “kirmizi” isimli CSS classları bulunuyor. İstiyoruz ki; “Go!” butonuna bastığımızda “renkDegistir()” fonksiyonumuz çalışsın, önce “kirmizi” class’ını “yesil” yapsın, ardından da seçili elementin metnini “Yeni Metin” olarak değiştirsin.

Bunun için document.querySelector(“ul li.kirmizi”); söz diziliminş kullanarak “kirmizi” class’ına sahip “li” etiketlerini seçiyoruz. Yalnız dikkat edeceğiniz üzere “querySelector” kullandığımız için tek bir element seçilecek ve yaptığımız değişiklikler bulunan ilk elemente uygulanacak. Eğer “Go!” butonuna basmaya devam edersek, her seferinde sıradaki elementin özelliklerinin değiştiğini görebiliriz. Fark ettiniz mi? Yukarıda bahsettiğimiz seçicilerle Selector API arasındaki en büyük farklılık Selector API’nin seçim işlemini CSS yazım şekliyle yapıyor olması geliyor.

Şimdi aynı örneğimizi querySelectorAll için düzenleyelim. Aslında tek yapmamız gereken Javascript kodumuzu aşağıdaki gibi düzenlemek.

<script>
        renkDegistir = function(){
            var elm = document.querySelectorAll("ul li.kirmizi");
            for (var i = 0; i < elm.length; i++) {
                elm[i].className = "yesil";
                elm[i].innerHTML = "Yeni Metin";
            }
        }
</script>

querySelectorAll, querySelector’dan farklı olarak bize verdiğimiz kıstasa uygun tüm elementlerin bir listesini döndürdü.

Bir sonraki yazı da görüşmek üzere..
Kaynak
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName
http://www.mynotlar.com/html_dom/document/default.aspx
http://www.w3.org/TR/selectors-api/
http://www.w3.org/TR/selectors-api2/
http://dev.w3.org/2006/webapi/selectors-api2/
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/element.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.