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;
}