Javascript attribute kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #attribute

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.