JavaScript DOM: HTML Özellikleri (Attribute) Üzerinde Çalışmak

HTML elementlerinin sadece içeriği yoktur, aynı zamanda özellikleri (attributes) de vardır. Bir resmin src'si, bir linkin href'i, bir input'un type'ı... Bunların hepsi attribute'tur.

JavaScript ile bu özellikleri okuyabilir ve değiştirebilirsiniz. Bu makalede attribute'larla nasıl çalışacağımızı öğreneceğiz.

Attribute Nedir?

HTML'de elementlerin açılış etiketinde yer alan ek bilgilerdir:

html

<img src="foto.jpg" alt="Açıklama" id="resim" class="galeri">
<a href="https://example.com" target="_blank">Link</a>
<input type="email" placeholder="E-posta" required>

Yukarıdaki örnekte:

src, alt, id, class → img'nin attribute'ları
href, target → a'nın attribute'ları
type, placeholder, required → input'un attribute'ları

Attribute'lara Doğrudan Erişim

Birçok yaygın attribute'a doğrudan property olarak erişebilirsiniz:

id

html

<div id="kutu">İçerik</div>

javascript

const kutu = document.querySelector("#kutu");

// Okuma
console.log(kutu.id);  // "kutu"

// Değiştirme
kutu.id = "yeni-kutu";
console.log(kutu.id);  // "yeni-kutu"

src (Resimler için)

html

<img id="logo" src="logo.png" alt="Site Logosu">

javascript

const logo = document.querySelector("#logo");

// Okuma
console.log(logo.src);  // "https://site.com/logo.png" (tam URL)

// Değiştirme
logo.src = "yeni-logo.png";

href (Linkler için)

html

<a id="link" href="/hakkimizda">Hakkımızda</a>

javascript

const link = document.querySelector("#link");

// Okuma
console.log(link.href);  // "https://site.com/hakkimizda" (tam URL)

// Değiştirme
link.href = "/iletisim";

value (Input'lar için)

html

<input id="isim" type="text" value="Ahmet">

javascript

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

// Okuma
console.log(input.value);  // "Ahmet"

// Değiştirme
input.value = "Mehmet";

type (Input'lar için)

javascript

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

// Okuma
console.log(input.type);  // "text"

// Değiştirme
input.type = "password";  // Artık şifre alanı
input.type = "email";     // Artık email alanı

placeholder

javascript

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

input.placeholder = "E-posta adresinizi girin";

checked (Checkbox/Radio için)

html

<input type="checkbox" id="onay">

javascript

const checkbox = document.querySelector("#onay");

// Okuma
console.log(checkbox.checked);  // false

// Değiştirme
checkbox.checked = true;  // Artık işaretli

disabled

javascript

const buton = document.querySelector("button");

// Butonu devre dışı bırak
buton.disabled = true;

// Butonu aktif et
buton.disabled = false;

getAttribute() Metodu

getAttribute() ile herhangi bir attribute'u okuyabilirsiniz:

Sözdizimi

javascript

element.getAttribute("attribute-adi")

Örnekler

html

<img id="resim" src="foto.jpg" alt="Güzel manzara" data-kategori="doga">

javascript

const resim = document.querySelector("#resim");

console.log(resim.getAttribute("src"));           // "foto.jpg"
console.log(resim.getAttribute("alt"));           // "Güzel manzara"
console.log(resim.getAttribute("id"));            // "resim"
console.log(resim.getAttribute("data-kategori")); // "doga"

Doğrudan Erişim vs getAttribute Farkı

Bazı attribute'larda fark vardır:

html

<a id="link" href="/sayfa">Link</a>

javascript

const link = document.querySelector("#link");

// Doğrudan erişim - TAM URL döner
console.log(link.href);  // "https://site.com/sayfa"

// getAttribute - HTML'deki değeri döner
console.log(link.getAttribute("href"));  // "/sayfa"

Bu fark özellikle href ve src gibi URL attribute'larında görülür.

setAttribute() Metodu

setAttribute() ile herhangi bir attribute'u değiştirebilir veya yeni attribute ekleyebilirsiniz:

Sözdizimi

javascript

element.setAttribute("attribute-adi", "yeni-deger")

Örnekler

html

<img id="resim" src="eski.jpg">

javascript

const resim = document.querySelector("#resim");

// Mevcut attribute'u değiştir
resim.setAttribute("src", "yeni.jpg");

// Yeni attribute ekle
resim.setAttribute("alt", "Yeni resim açıklaması");
resim.setAttribute("title", "Üzerine gelince görünecek metin");

// Data attribute ekle
resim.setAttribute("data-id", "123");

Input Tipini Değiştirme

html

<input id="alan" type="text" placeholder="Metin girin">

javascript

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

// Text → Password
input.setAttribute("type", "password");

// Password → Color (renk seçici)
input.setAttribute("type", "color");

// Color → Date (tarih seçici)
input.setAttribute("type", "date");

removeAttribute() Metodu

Bir attribute'u tamamen kaldırmak için kullanılır:

Sözdizimi

javascript

element.removeAttribute("attribute-adi")

Örnekler

html

<input id="email" type="email" required disabled placeholder="E-posta">

javascript

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

// required attribute'unu kaldır
input.removeAttribute("required");

// disabled attribute'unu kaldır
input.removeAttribute("disabled");

// placeholder'ı kaldır
input.removeAttribute("placeholder");

hasAttribute() Metodu

Bir attribute'un var olup olmadığını kontrol eder:

Sözdizimi

javascript

element.hasAttribute("attribute-adi")  // true veya false

Örnekler

html

<input id="sifre" type="password" required>
<input id="isim" type="text">

javascript

const sifre = document.querySelector("#sifre");
const isim = document.querySelector("#isim");

console.log(sifre.hasAttribute("required"));  // true
console.log(isim.hasAttribute("required"));   // false

// Koşullu işlem
if (sifre.hasAttribute("required")) {
    console.log("Bu alan zorunludur!");
}

Data Attributes (data-*)

HTML5 ile gelen özel attribute'lar. Kendi verilerinizi elementlere ekleyebilirsiniz:

HTML'de Tanımlama

html

<div id="urun"
     data-id="42"
     data-fiyat="150"
     data-kategori="elektronik"
     data-stok-durumu="var">
    Ürün Bilgisi
</div>

JavaScript'te Okuma

javascript

const urun = document.querySelector("#urun");

// getAttribute ile
console.log(urun.getAttribute("data-id"));          // "42"
console.log(urun.getAttribute("data-fiyat"));       // "150"
console.log(urun.getAttribute("data-kategori"));    // "elektronik"
console.log(urun.getAttribute("data-stok-durumu")); // "var"

// dataset ile (daha kolay!)
console.log(urun.dataset.id);          // "42"
console.log(urun.dataset.fiyat);       // "150"
console.log(urun.dataset.kategori);    // "elektronik"
console.log(urun.dataset.stokDurumu);  // "var" (tire camelCase'e dönüşür)

JavaScript'te Yazma

javascript

// setAttribute ile
urun.setAttribute("data-indirim", "20");

// dataset ile
urun.dataset.indirim = "20";
urun.dataset.ypiTarihi = "2024-01-15";  // data-ypiTarihi olur

Pratik Örnekler

Örnek 1: Resim Galerisi

html

<img id="ana-resim" src="resim1.jpg" alt="Resim 1">
<div class="thumbnails">
    <img src="resim1.jpg" data-buyuk="resim1-buyuk.jpg">
    <img src="resim2.jpg" data-buyuk="resim2-buyuk.jpg">
    <img src="resim3.jpg" data-buyuk="resim3-buyuk.jpg">
</div>

javascript

const anaResim = document.querySelector("#ana-resim");
const kucukResimler = document.querySelectorAll(".thumbnails img");

kucukResimler.forEach(kucuk => {
    kucuk.addEventListener("click", function() {
        // Tıklanan resmin büyük versiyonunu al
        const buyukSrc = this.getAttribute("data-buyuk");
        // Ana resmi değiştir
        anaResim.src = buyukSrc;
    });
});

Örnek 2: Link Hedefini Değiştirme

html

<a id="harici-link" href="https://google.com">Google'a Git</a>

javascript

const link = document.querySelector("#harici-link");

// Yeni sekmede açılmasını sağla
link.setAttribute("target", "_blank");

// Güvenlik için rel attribute ekle
link.setAttribute("rel", "noopener noreferrer");

// Linki değiştir
link.href = "https://youtube.com";
link.innerText = "YouTube'a Git";

Örnek 3: Form Doğrulama

html

<form id="kayit-formu">
    <input id="email" type="email" placeholder="E-posta">
    <input id="sifre" type="password" placeholder="Şifre">
    <button type="submit">Kayıt Ol</button>
</form>

javascript

const emailInput = document.querySelector("#email");
const sifreInput = document.querySelector("#sifre");

// Zorunlu alan yap
emailInput.setAttribute("required", "");
sifreInput.setAttribute("required", "");

// Minimum şifre uzunluğu
sifreInput.setAttribute("minlength", "8");

// Placeholder güncelle
sifreInput.placeholder = "En az 8 karakter";

Örnek 4: Şifre Göster/Gizle

html

<input id="sifre" type="password" placeholder="Şifreniz">
<button id="toggle-btn">Göster</button>

javascript

const sifreInput = document.querySelector("#sifre");
const toggleBtn = document.querySelector("#toggle-btn");

toggleBtn.addEventListener("click", function() {
    if (sifreInput.type === "password") {
        sifreInput.type = "text";
        this.innerText = "Gizle";
    } else {
        sifreInput.type = "password";
        this.innerText = "Göster";
    }
});

Örnek 5: Dinamik Buton Durumu

html

<input id="kabul" type="checkbox"> Şartları kabul ediyorum
<button id="devam-btn" disabled>Devam Et</button>

javascript

const checkbox = document.querySelector("#kabul");
const buton = document.querySelector("#devam-btn");

checkbox.addEventListener("change", function() {
    if (this.checked) {
        buton.disabled = false;
        buton.style.opacity = "1";
    } else {
        buton.disabled = true;
        buton.style.opacity = "0.5";
    }
});

Örnek 6: Ürün Kartları

html

<div class="urun" data-id="1" data-fiyat="500" data-stok="true">
    <h3>Ürün A</h3>
    <button class="sepet-btn">Sepete Ekle</button>
</div>
<div class="urun" data-id="2" data-fiyat="750" data-stok="false">
    <h3>Ürün B</h3>
    <button class="sepet-btn">Sepete Ekle</button>
</div>

javascript

const sepetButonlari = document.querySelectorAll(".sepet-btn");

sepetButonlari.forEach(buton => {
    const urunKarti = buton.parentElement;
    const stokVar = urunKarti.dataset.stok === "true";

    if (!stokVar) {
        buton.disabled = true;
        buton.innerText = "Stokta Yok";
    }

    buton.addEventListener("click", function() {
        const urunId = urunKarti.dataset.id;
        const fiyat = urunKarti.dataset.fiyat;
        console.log(`Ürün ${urunId} sepete eklendi. Fiyat: ${fiyat} TL`);
    });
});

Örnek 7: Tüm Harici Linkleri İşaretle

javascript

const tumLinkler = document.querySelectorAll("a");

tumLinkler.forEach(link => {
    const href = link.getAttribute("href");

    // Harici link mi kontrol et
    if (href && href.startsWith("http")) {
        link.setAttribute("target", "_blank");
        link.setAttribute("rel", "noopener");
        link.innerHTML += " ↗";  // İkon ekle
    }
});

Attribute Metodları Özet Tablosu

Metod	Açıklama	Örnek
`getAttribute()`	Attribute değerini oku	`el.getAttribute("href")`
`setAttribute()`	Attribute değerini ayarla	`el.setAttribute("href", "/yeni")`
`removeAttribute()`	Attribute'u kaldır	`el.removeAttribute("disabled")`
`hasAttribute()`	Attribute var mı kontrol	`el.hasAttribute("required")`

Doğrudan Erişim vs Metodlar

Özellik	Doğrudan Erişim	getAttribute/setAttribute
Sözdizimi	`element.id`	`element.getAttribute("id")`
URL'ler	Tam URL döner	HTML'deki değer döner
Boolean attr.	`true`/`false` döner	String döner
Özel attr.	Çalışmaz	Çalışır
Performans	Biraz daha hızlı	Biraz daha yavaş

Hangisini Kullanmalı?

javascript

// Yaygın attribute'lar için doğrudan erişim
element.id = "yeni-id";
element.src = "resim.jpg";
element.value = "metin";
element.disabled = true;

// Data attribute'lar için dataset
element.dataset.kategori = "elektronik";

// Özel veya nadir attribute'lar için metodlar
element.setAttribute("aria-label", "Açıklama");
element.getAttribute("data-ozel-deger");

Özet

javascript

const element = document.querySelector("#element");

// OKUMA
element.id;                        // Doğrudan erişim
element.src;                       // Doğrudan erişim
element.getAttribute("href");      // getAttribute ile
element.dataset.kategori;          // Data attribute

// YAZMA
element.id = "yeni-id";                       // Doğrudan
element.setAttribute("title", "Başlık");      // setAttribute ile
element.dataset.durum = "aktif";              // Data attribute

// KONTROL
element.hasAttribute("required");  // true/false

// KALDIRMA
element.removeAttribute("disabled");

Sırada Ne Var?

Attribute'larla çalışmayı öğrendik. Peki elementlerin stillerini JavaScript ile nasıl değiştiririz?

Bir sonraki makalede Changing Styles konusunu öğreneceğiz - CSS özelliklerini JavaScript ile dinamik olarak değiştirme.

Attribute Nedir?

Attribute'lara Doğrudan Erişim

id

src (Resimler için)

href (Linkler için)

value (Input'lar için)

type (Input'lar için)

placeholder

checked (Checkbox/Radio için)

disabled

getAttribute() Metodu

Sözdizimi

Örnekler

Doğrudan Erişim vs getAttribute Farkı

setAttribute() Metodu

Sözdizimi

Örnekler

Input Tipini Değiştirme

removeAttribute() Metodu

Sözdizimi

Örnekler

hasAttribute() Metodu

Sözdizimi

Örnekler

Data Attributes (data-*)

HTML'de Tanımlama

JavaScript'te Okuma

JavaScript'te Yazma

Pratik Örnekler

Örnek 1: Resim Galerisi

Örnek 2: Link Hedefini Değiştirme

Örnek 3: Form Doğrulama

Örnek 4: Şifre Göster/Gizle

Örnek 5: Dinamik Buton Durumu

Örnek 6: Ürün Kartları

Örnek 7: Tüm Harici Linkleri İşaretle

Attribute Metodları Özet Tablosu

Doğrudan Erişim vs Metodlar

Hangisini Kullanmalı?

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword