JavaScript setAttribute nedir?

Mehmet · Dün 21:14 da

JavaScript setAttribute nedir?

setAttribute(), bir HTML elementinin özniteliğini (attribute) oluşturmak veya mevcut değerini değiştirmek için kullanılan DOM metodudur. İlk parametre öznitelik adını, ikinci parametre ise değerini alır. Örneğin link.setAttribute("href", "https://example.com/") ifadesi bağlantının href değerini ayarlar.

Metot doğrudan seçtiğiniz element üzerinde çalışır ve geriye kullanılabilir bir değer döndürmez. Öznitelik değeri sayı veya boolean olarak verilse bile DOM'a metin olarak yazılır.

Temel kullanım

Kod:

element.setAttribute("öznitelik-adı", "değer");

Aşağıdaki örnek, düğmeye data-state özniteliği ekler ve mevcut class değerini değiştirir:

Kod:

<button id="saveButton" style="border-radius:4px">Kaydet</button>

<script>
  const button = document.querySelector("#saveButton");

  button.setAttribute("data-state", "ready");
  button.setAttribute("class", "button button-primary");

  console.log(button.getAttribute("data-state"));
  console.log(button.outerHTML);
</script>

Beklenen ilk konsol çıktısı ready olur. Elementin HTML görünümü de kabaca <button id="saveButton" data-state="ready" class="button button-primary">Kaydet</button> biçimine gelir. Element bulunamazsa button değeri null olur ve setAttribute çağrısı hata verir. Bu nedenle seçicinin gerçekten bir element döndürdüğünü kontrol edin veya kodu DOM yüklendikten sonra çalıştırın.

setAttribute nasıl çalışır?

Metot, aynı adla bir öznitelik zaten varsa onu günceller; yoksa yeni bir öznitelik ekler. Örneğin setAttribute("title", "Açıklama") tarayıcıda elementin üzerine gelindiğinde görülen title açıklamasını değiştirir. Özniteliği okumak için getAttribute(), kaldırmak için removeAttribute() kullanılır.

Bir element seçip özniteliği uygulamak için şu sırayı izleyin:

Elementi querySelector() veya getElementById() ile seçin.
Öznitelik adını doğru yazımla belirleyin; örneğin aria-label ve data-id tireleriyle yazılır.
Değeri setAttribute() ile atayın.
Sonucu getAttribute() veya tarayıcının Geliştirici Araçları içindeki Elements panelinden kontrol edin.

Aşağıdaki ayrı parçada HTML içinde id'si email olan bir input bulunduğu varsayılır. Görünen label öğesini tercih edin; aria-label kullandığınızda erişilebilir adın görünür etiketle çelişmemesine dikkat edin:

Kod:

const input = document.querySelector("#email");

input.setAttribute("aria-label", "E-posta adresi");
input.setAttribute("data-source", "signup");

Attribute ile property farkı

HTML özniteliği, elementin HTML üzerindeki niteliğidir; property ise JavaScript nesnesinin özelliğidir. Bazı alanlarda ikisi birbiriyle ilişkilidir ancak her zaman aynı davranmaz.

İhtiyaç	Uygun yaklaşım	Örnek
HTML özniteliğini eklemek veya okumak	`setAttribute()` / `getAttribute()`	`data-id`, `aria-label`
Form değerini veya durumunu değiştirmek	Property kullanmak	`input.value = "Ali"`
CSS sınıfını yönetmek	`classList` kullanmak	`element.classList.add("active")`
Özniteliği tamamen silmek	`removeAttribute()`	`element.removeAttribute("disabled")`

Örneğin bir input'un kullanıcıya görünen güncel değerini değiştirmek için input.setAttribute("value", "Ali") yerine çoğunlukla input.value = "Ali" tercih edilir. Çünkü form kontrolünün canlı değeri property üzerinden yönetilir.

Sık yapılan hatalar

Öznitelik adını JavaScript property biçiminde yazmak: ariaLabel yerine aria-label, tabIndex yerine HTML'deki gerçek ad kullanılmalıdır.
Mevcut class değerini yanlışlıkla silmek: setAttribute("class", "active") eski sınıfların tamamını değiştirir. Sınıf eklemek için classList.add() kullanın.
Boolean özniteliklerde false yazmanın kaldırma anlamına geldiğini sanmak: disabled="false" özniteliğin varlığını korur ve bu özniteliği destekleyen form kontrolü hâlâ devre dışıdır. Kaldırmak için removeAttribute("disabled") kullanın.
Element seçilmeden metodu çağırmak: Seçici eşleşmiyorsa önce null kontrolü yapın ve script'in DOM oluşturulduktan sonra çalıştığından emin olun.

Sık sorulan sorular

setAttribute ile yeni bir HTML elementi oluşturulur mu?

Hayır. Metot yalnızca mevcut bir elementin özniteliklerini değiştirir. Yeni element için document.createElement() kullanıp ardından öznitelikleri ayarlamanız gerekir.

ARIA özniteliğinde false değeri de disabled gibi mi davranır?

Hayır. ARIA durumları, disabled gibi HTML boolean öznitelikleriyle aynı değildir. Örneğin aria-expanded="false" geçerli bir durum bildirir; buna rağmen denetimin gerçek açılıp kapanma davranışını JavaScript ile ayrıca uygulamanız gerekir.

JavaScript setAttribute nedir?

Mehmet