Javascript ile bir elemanın özelliği kontrol edilebilir, değiştirilebilir, alınabilir, çıkaırılabilir yada yeni özellik eklenebilir. Özellik dediğim kavram , paramaetre yada attribute olarak ta isimlendirilen , html etiketlerinin içerisinde belirtilen ek değerlerdir. .Bunun için
- getAttribute()
- setAttribute()
- creatAttribute()
- removeAttribute()
- hasAttribute()
metodları kullanılır.
Özellik Değerini Almak - getAttribute()
getAttribute() ile istenen bir özelliğin değeri öğrenilebilir. . Örneğin "box" id'li bir metin kutusunun "name" özelliğinin değerini alalım.
<input type="text" id="box" name="box">
<script>
dom=document.getElementById("box");
deger=dom.getAttribute("name");
// deger değişkenine "box" atanacaktır.
</script>
Özellik Değeri Değiştirme - setAttribute()
setAttribute() ile istenen değişikleri yapmak daha pratiktir.. Özellik ve değer aynı anda atanabilir. Bunu için parantez içerisinde önce değiştirilmek yada eklenmek istenen "özellik" , sonra ise verilmek istenen "değer" , tırnak işaretleri arasında belirtilir.
setAttribute("ÖZELLİK","DEĞER");
Örneğin, "box" id'li bir textbox elemanına hem name hem disabled özellikleri ekleyelim.
<input type="text" id="box" name="box">
<script>
dom=document.getElementById("box");
dom.setAttribute("name","box");
dom.setAttribute("disabled","");
</script>
Script çalıştığında input elamanı aşağıdaki gibi olur. Hem "name" , hem "disabled" özellikleri eklenmiş olacaktır.
<input type="text" id="box" name="box" disabled>
Peki halihazırda var olan bir özelliğin değerini yine aynı yöntemle değiştirebilir miyiz? Cevap evet. Örneğin textbox'ın "box" olan id'sini "entry" yapalım.
<script>
dom=document.getElementById("box");
dom.setAttribute("id","entry");
</script>
Script çalıştığında input elamanınn "id" özelliği "entry" olur.
<input type="text" id="entry" name="box" disabled>
Özellik Yaratma ve Değer Verme - creatAttribute()
creatAttribute() ile önce "özellik" oluşturulur .Daha sonra "değer"i verilip , istenen elemana
setAttributeNode ile atanır. setAttribute() methoduna göre daha uzundur.
<input type="text" id="box">
var yeniozellik = document.createAttribute('name');
// name özelliği oluşturuluyor..
yeniozellik.value="box";
// name özelliğine "box" değeri veriliyor
document.getElementById("box").setAttributeNode(yeniozellik);
//oluştuurlan özellik-değer ikilisi , "box" id'li elemana veriliyor...
Script çalıştığında input elamanınn "name" özelliği "box" olur.
<input type="text" id="entry" name="box" disabled>
Özellik Çıkarma - removeAttribute()
removeAttribute() ile istenen bir özellik elemandan çıkarılabilir. . Örneğin "box" id'li bir metin kutusunun "name" özelliğini kaldıralım
<input type="text" id="box" name="box">
<script>
dom=document.getElementById("box");
dom.removeAttribute("name");
// name özelliği kaldırılmış olur..
</script>
Script çalıştığında input elemeanının name özelliği kaldırılmış olur.
<input type="text" id="box">
Özellik Kontrolü (Varmı,Yokmu) - hasAttribute()
hasAttribute() ile elemanda bir özelliğin olup olmadığıu öğrenilebilir.. . İf yapısıyla beraber kullanılır. Özellğin var olması durumunda true , olmaması durumunda false değeri döner.
Örneğin "box" id'li bir metin kutusunun "name" özelliğinin olup olmadığını kontrol edelim. Varsa değerini "yazi" olarak değiştirelim.
<input type="text" id="box" name="box">
<script>
dom=document.getElementById("box");
if (dom.hasAttribute("name")) { // name özelliği varsa
dom.setAtrribute("name","yazi"); // değeri "yazi" oluyor
}
</script>
Script çalıştığında input elemenının name özelliği "yazi" olur. Burada dom.hasattribute("name") ifadesi , metin kutusunun hali hazırda bir name parametresi olduğu için , bize true (1) sonucu döndürür ve if koşulu sağlanmış olur.
