setAttribute ve removeAttribute

Özellik eklemeyi, değiştirmeyi ve silmeyi öğrenirsin.

setAttribute ile öznitelik ekleme

Bir HTML öğesine öznitelik (attribute) eklemek veya değiştirmek için setAttribute metodunu kullanırsın. İlk parametre öznitelik adı, ikinci parametre değeri olur.

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

Öznitelik zaten varsa değeri değişir; yoksa yeni eklenir. Bu metod, HTML özniteliklerini her zaman dize olarak yazar.

getAttribute ve removeAttribute

Özniteliği okumak için getAttribute, silmek için removeAttribute kullanırsın. İkisi de öznitelik adını tek parametre olarak alır.

const link = document.querySelector('a');
console.log(link.getAttribute('href'));
link.removeAttribute('target');

Var olmayan bir özniteliği okursan null döner; var olmayanı silersen hata çıkmaz. Bu üç metod birlikte öznitelikleri rahatça yönetmeni sağlar.

Uygulama Bağlantıya href ata

link değişkeni bir <a> öğesini gösteriyor. setAttribute ile href özniteliğine 'https://example.com' değerini ata. Sonra target özniteliğini kaldır.

Örnek çözümü göster

link.setAttribute('href', 'https://example.com');
link.removeAttribute('target');

Kendini test et

Hangisi input'a type='email' yazar?

const input = document.querySelector('input');
// A
input.setAttribute('email', 'type');
// B
input.attribute('type', 'email');
// C
input.setAttribute('type', 'email');
// D
input.setAttribute('type', email);

Cevabı göster

C — Doğru! İlk parametre ad, ikinci değer: setAttribute('type', 'email').

src özniteliğini ata

const img = document.querySelector('img');
img.____('src', 'logo.png');

Cevabı göster

const img = document.querySelector('img');
img.setAttribute('src', 'logo.png');

Metotları eşleştir

setAttribute('id', 'x')

Öznitelik yazar
getAttribute('id')

Özniteliği okur
removeAttribute('id')

Özniteliği siler

Sıradaki ders: innerHTML ve insertAdjacentHTML

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler