JAVASCRIPT İLE ÖZELLİK (ATTRIBUTE) İşlemlerİ

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.