Javascript attribute kullanımı

Javascript

attribute

kullanımında bir nesneye yeni özellikler ekleyebilir, silebilir veya kontrol edebiliriz. Yeni bir özellik ekleme istiyor isek

setAttribute()

, özellik silmek istiyor isek

removeAttribute()

, değer elde etmek istiyor isek

getAttribute()

, özelliğin varlığını kontrol etmek istiyor isek

hasAttribute()

method kullanımları sağlayabilmekteyiz.

İlk olarak bir nesneye bir özellik eklemek istediğimizde kullanmamız gereken

setAttribute()

methodu özellik ekleyebiliriz.

<a id="baglanti">kodhocasi.com</a>

var e = document.getElementById("baglanti");
e.setAttribute("href","https://www.kodhocasi.com");

Yukarıdaki örneğin uygulama sonrası

a

etikenin son hali aşağıdaki gibidir.

Bu örnek daha fazlada geliştirilebilmektedir. Bir

checbox

a

checked

veya bir butona

disabled

gibi özelliklerde eklenebilmektedir.

Eğer nesne üzerinden bir özelliği silmek istiyor ise

removeAttribute()

methodu kullanımı sağlanabilmektedir.

<input type="checkbox" id="sec" checked="">
<label>Seç Beni</label>

Yukarıdaki örnekte

checbox

ilk ekrana yansıdığında seçili bir hale olacaktır.

var e = document.getElementById("sec");
e.removeAttribute("checked","");

Daha sonra yukarıdaki satırlar ile

checbox

üzerindeki

checked

özelliğini kaldırmış oluyoruz böylece elemanımız sanki seçilmemiş gibi ekrana yansıyacaktır.

Nesne üzerinde bir özelliğin varlığını kontrol etmek istiyor isek

hasAttribute()

methodu ile kontrol işlemi sağlayabiliriz. Eğer nesne üzerinde değer mevcut ise bize

true

değerini döndürecektir.

var e = document.getElementById("tikla");

if (e.hasAttribute("disabled")) {
 alert("Dokunulmazlığı var");
}else{
 alert("Dokunabilirsin");
}

Yukarıdaki örnekte ilk olarak butonumuza

disabled

özelliği ile tıklama özelliğini pasif etmekteyiz. Böylece buton işlevini yitirmektedir. Eğer buton elemanı üzerinde

disabled

özelliği bulunuyor ise bize

true

değerini geri döndürecektir ve sonucunda alert ile ekrana Dokunulmazlığı var diye uyarı verecektir.

Nesne üzerinden bir özelliğin değerine ulaşmak istiyor isek

getAttribute()

methodunu kullanabiliriz.

<div class="container" id="foklarYasamali"></div>

var e = document.querySelector(".container");
alert(e.getAttribute("class"));

Yukarıdaki son örneğimizde ise

getAttribute()

methodu ile div imizin id özelliğinin değerini elde edebilmekteyiz. sayfa çalışması durumunda kullanıcıya foklarYasamali diye id özelliğinin değerini verecektir.