DOM Manipülasyonu - Nitelikler ve Stiller

// HTML: Örnek Site
// HTML: 

let linkElement = document.getElementById("link");
let resimElement = document.getElementById("resim");

let hrefDegeri = linkElement.getAttribute("href");
console.log("Link href:", hrefDegeri); // "https://www.example.com"

let targetDegeri = linkElement.getAttribute("target");
console.log("Link target:", targetDegeri); // "_blank"

let srcDegeri = resimElement.getAttribute("src");
console.log("Resim src:", srcDegeri); // "logo.png"

let olmayanNitelik = linkElement.getAttribute("data-id");
console.log("Olmayan Nitelik:", olmayanNitelik); // null

// HTML: 

let profilResmi = document.getElementById("profil-resmi");

// src niteliğini değiştirme
profilResmi.setAttribute("src", "yeni_profil.png");
console.log(profilResmi.getAttribute("src")); // "yeni_profil.png"

// alt niteliğini değiştirme
profilResmi.setAttribute("alt", "Kullanıcı Profil Resmi");

// Yeni bir nitelik ekleme (width)
profilResmi.setAttribute("width", "150");

// HTML şimdi: 

// HTML: 

let inputElement = document.getElementById("kullanici-adi");

console.log("disabled niteliği var mı?", inputElement.hasAttribute("disabled")); // true
console.log("value niteliği var mı?", inputElement.hasAttribute("value")); // false
console.log("placeholder niteliği var mı?", inputElement.hasAttribute("placeholder")); // false

// HTML: Gönder

let buton = document.getElementById("gonder-btn");

console.log("Buton etkin mi?", !buton.hasAttribute("disabled")); // false

// disabled niteliğini kaldırma
buton.removeAttribute("disabled");

console.log("disabled niteliği kaldırıldı mı?", !buton.hasAttribute("disabled")); // true
console.log("Buton etkin mi?", !buton.hasAttribute("disabled")); // true

// HTML şimdi: Gönder

// HTML: 

let input = document.getElementById("isim-input");

// Değeri okuma
console.log(input.value); // "Başlangıç Değeri"
console.log(input.id); // "isim-input"
console.log(input.type); // "text"

// Değeri değiştirme
input.value = "Yeni Değer";
console.log(input.getAttribute("value")); // Dikkat! getAttribute başlangıçtaki HTML değerini verebilir.
console.log(input.value); // "Yeni Değer" (Güncel değer)

input.disabled = true; // disabled özelliğini true yapma
console.log(input.hasAttribute("disabled")); // true

// HTML: Bu bir uyarı mesajıdır.

let uyariParagrafi = document.getElementById("uyari");

// Sınıf ekleme
uyariParagrafi.classList.add("kirmizi", "kalin");
console.log(uyariParagrafi.className); // "mesaj kirmizi kalin"

// Sınıf kaldırma
uyariParagrafi.classList.remove("mesaj");
console.log(uyariParagrafi.className); // "kirmizi kalin"

// Sınıf varlığını kontrol etme
console.log("kirmizi sınıfı var mı?", uyariParagrafi.classList.contains("kirmizi")); // true
console.log("mavi sınıfı var mı?", uyariParagrafi.classList.contains("mavi")); // false

// Sınıfı değiştirme (toggle)
uyariParagrafi.classList.toggle("kalin"); // "kalin" sınıfı vardı, kaldırıldı.
console.log(uyariParagrafi.className); // "kirmizi"
uyariParagrafi.classList.toggle("kalin"); // "kalin" sınıfı yoktu, eklendi.
console.log(uyariParagrafi.className); // "kirmizi kalin"

// Sınıfı değiştirme (replace)
uyariParagrafi.classList.replace("kirmizi", "yesil");
console.log(uyariParagrafi.className); // "yesil kalin"

// HTML: 

let kutuElementi = document.getElementById("kutu");

// Arka plan rengini değiştirme
kutuElementi.style.backgroundColor = "lightblue";

// Genişliği artırma
kutuElementi.style.width = "150px";

// Yazı tipi boyutunu ayarlama
kutuElementi.style.fontSize = "20px";

// Kenarlık stilini değiştirme
kutuElementi.style.border = "2px dashed red";

// Bir stili kaldırmak için boş string atama
kutuElementi.style.height = ""; // height stilini kaldırır

// Stilleri okuma (sadece inline stilleri okur!)
console.log(kutuElementi.style.backgroundColor); // "lightblue"
console.log(kutuElementi.style.width); // "150px"
console.log(kutuElementi.style.padding); // "" (Eğer inline olarak ayarlanmadıysa boş döner)

/* CSS: 
#bilgi-kutusu {
    padding: 15px;
    font-size: 16px;
    color: rgb(51, 51, 51);
}
*/
// HTML: Bilgi

let bilgiKutusu = document.getElementById("bilgi-kutusu");

let stiller = window.getComputedStyle(bilgiKutusu);

// Hesaplanan stilleri okuma
console.log("Hesaplanan Padding:", stiller.padding); // "15px" (CSS'den geldi)
console.log("Hesaplanan Font Size:", stiller.fontSize); // "16px" (CSS'den geldi)
console.log("Hesaplanan Background Color:", stiller.backgroundColor); // "rgb(255, 255, 0)" (inline stilden geldi)
console.log("Hesaplanan Color:", stiller.color); // "rgb(51, 51, 51)" (CSS'den geldi)
console.log("Hesaplanan Display:", stiller.display); // "block" (Tarayıcı varsayılanı)

// stiller.color = "red"; // Hata! getComputedStyle sadece okunabilirdir.