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);- A
- B
- C
- D
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