javaScript Attribute OLUŞTURMA-SİLME setAttribute-removeAttribute

JavaScript'e HTML elemanları oluşturduğumuz gibi onların attribute(öznitelik)'leri oluşturup silebiliriz. Bunun için attribute oluşturmak için setAttribute() methodu, attribute silmek için removeAttribute() Methodu, attribute değerini öğrenmek için getAttribute() methodu, attribute varmı yokmu kontrol için hasAttribute() methodu kullanırız.

HTML DOM setAttribute() yöntemi

Belirtilen öğe üzerinde bir öznitelik değerini ayarlar. Özellik zaten varsa, değer güncellenir; aksi halde, belirtilen ad ve değerle yeni bir nitelik eklenir.

ipucu :Bir özniteliğin geçerli değerini almak için, getAttribute() kullanın; bir niteliği kaldırmak için removeAttribute() öğesini çağırın.

Not : Bu yöntemle bir öğeye stil niteliğini bir değerle eklemek mümkün olsa da satır içi stil için bunun yerine Stil nesnesinin özelliklerini kullanmanız önerilir, çünkü bunun içinde belirtilen diğer CSS özelliklerinin üzerine yazılamaz. stil özniteliği:

KÖTÜ ÖRNEK:

element.setAttribute("style", "background-color: blue;");

İYİ ÖRNEK:

element.style.backgroundColor = "yellow";

SÖZDİZİMİ :

element.setAttribute(isim, değer)

isim : Gereklidir. Eklemek istediğiniz özniteliğin adı.

değer : Gereklidir. Eklemek istediğiniz öznitelik değeri.

ÖRNEK:

Bir buton oluşturun "name" öznitelliğine webcebir yazsın ve buton disable özelliği olsun.

HTML :

<button>javaScript</button>

javaScript :

var b = document.querySelector("button"); 

b.setAttribute("name", "webcebir");

b.setAttribute("disabled", "");

HTML DOM getAttribute() Yöntemi

getAttribute() öğede belirtilen bir öznitelik değerini döndürür. Belirtilen öznitelik yoksa, döndürülen değer null veya (boş dize) olacaktır.

SÖZDİZİMİ :

element.getAttribute(isim)

isim : Gereklidir. Değer almak istediğiniz özniteliğin adı.

ÖRNEK:

HTML :

<div id="test" align="center">javaScript</div>

javaScript :

var test = document.querySelector("#test");

var align = test.getAttribute("align");//ÇIKTI:center

HTML DOM removeAttribute() Yöntemi

removeAttribute(), bir özniteliği belirtilen öğeden kaldırır.

NOT : Eleman üzerinde olmayan bir öznitelik kaldırmaya çalışıldığında bir istisna ortaya çıkmaz.

SÖZDİZİMİ :

element.removeAttribute(özellik)

Özellik :Gereklidir. Kaldırmak istediğiniz niteliğin adı.

ÖRNEK:

HTML:

<div id="test" align="left" width="300px">

javaScript :

var x=document.querySelector("#test");
 
x.removeAttribute("align");

//ÇIKTI:align öznitelik silinir.
 

HTML DOM hasAttribute() yöntemi

Belirtilen nitelik varsa hasAttribute() yöntemi true değerini, aksi halde false değerini döndürür.

SÖZDİZİMİ :

element.hasAttribute(özellik)

özellik :Gereklidir. Var olup olmadığını kontrol etmek istediğiniz öznitelik adı.

ÖRNEK:

Bir <a> öğesinin bir target özniteliği olup olmadığını öğrenin. Bu durumda, target özniteliğinin değerini "_self" olarak değiştirin:

HTML :

<a id="test" href="" target="_blank">webcebir.com</a>

javaScript :

// a elementin id="test" olanı seçin

var x = document.querySelector("#test"); 

//a elemanın target niteliği varsa "_self" olarak değiştirin

 if (x.hasAttribute("target")) { 
 
    x.setAttribute("target", "_self");
}