myn.getElemTagClass()

myn.getElemTagClass() fonksiyonu, belirtilen element altındaki etiket ve sinif (class) isimlerine uyan bütün elementlerin bir Array dizisi olarak alınmasını sağlar. Eğer element belirtilmezse document nesnesi baz alınır.

Sadece sınıf isimlerine göre arama yaparak, uyan elementleri döndüren getElementsByClassName isimli metodun bir kademe gelişmiş hali olan getElemTagClass fonksiyonu, parametre olarak etiket ismi (tag name) kullanılmadığında sadece belirtilen element altında sınıf isimlerine (class) uyan elementlerin listesini vererek aynen getElementsByClassName metodu gibi çalışır.

Sözdizimi

liste = myn.getElemTagClass(etiket, sinif, elem)

etiket	Aranacak etiket adını (tag name) belirler. Eğer, belirtilmezse veya '*' olarak atanırsa tüm etiketler kontrol edilir.
sinif	Aranacak sınıf adını (class name) belirler.
elem	Alt elementleri aranacak ana elementi belirler. Eğer belirtilmezse document nesnesi baz alınır.

Dönüş Değeri

liste

Belirtilen element altında etiket ve sınıf isimlerine uyan tüm elementler Array dizisi olarak döner. Uyumlu element bulunamazsa boş Array döner.

Kullanım Örneği

Aşağıdaki örnek, myn.getElemTagClass() fonksiyonu kullanılarak, aynı sınıf (class) ismine sahip DIV elementlerinin ve hem DIV hem de SPAN elementlerinin içeriklerinin değiştirilmesini göstermektedir.

<script type="text/javascript" src="mynotlar_getElemTagClass.js"></script>

<style type="text/css">
.ornekSinif
{
    width: 80px;
    height: 60px;
    float: left;
}
</style>

<input type="button" value="DIV'lere Yaz" onclick="divYaz()"/>
<input type="button" value="Hepsine Yaz" onclick="hepsiYaz()"/>

<table id="ornekTablo"><tr>
    <td><div class="ornekSinif" style="background-color:#3399FF;"></div></td>
    <td><div class="ornekSinif" style="background-color:#3399FF;"></div></td>
    <td><div class="ornekSinif" style="background-color:#3399FF;"></div></td>
    <td><span class="ornekSinif sinif1" style="background-color:#33FF99;"></span></td>
    <td><span class="ornekSinif sinif2" style="background-color:#33FF99;"></span></td>
    <td><span class="ornekSinif sinif3" style="background-color:#33FF99;"></span></td>
</tr></table>

<script type="text/javascript">

var tablo = document.getElementById("ornekTablo");

function divYaz() {
    var liste = myn.getElemTagClass("div", "ornekSinif", tablo);
    for(var i = 0; i < liste.length;i++)
        liste[i].innerHTML = "mynotlar";
}
function hepsiYaz() {
    var liste = myn.getElemTagClass("*", "ornekSinif", tablo);
    for(var i = 0; i < liste.length;i++)
        liste[i].innerHTML = "MYNOTLAR";
}
	
</script>

Test Edin

mynotlar_getElemTagClass.js

/*
    "myn.getElemTagClass()" Fonksiyon Betiği v1.0
    
    Telif Hakkı (c) 2008, mynotlar.com, Tüm hakları saklıdır.
    http://www.mynotlar.com 
*/

(window.myn = myn = window.myn || {}).getElemTagClass = 
function(m, y, n) {
    var s = [], s2, s3;    
    for(var a = 0;a < (s2 = (n = n || document).getElementsByTagName(m||'*')).length;a++) {
        s3 = s2[a].className.split(' ');
        for(var b = 0;b < s3.length;b++)
            if(s3[b] == y) s.push(s2[a]);    
    }return s;
}