JavaScript DOM: HTML Özellikleri (Attribute) Üzerinde Çalışmak
eminbasbayan
İçindekiler
Bu yazıda neler var?
Web sayfaları sadece yazı ve görsel içerikten oluşmaz. Her HTML öğesinin, yapısını ve davranışını belirleyen bazı özel nitelikleri (attributes) vardır. Bu nitelikler, JavaScript ile sayfa üzerinde dinamik değişiklikler yapmak istediğimizde çok işe yarar. Bu yazıda, JavaScript ile HTML öğelerinin bu niteliklerine nasıl erişileceğini, nasıl okunup değiştirileceğini sade ve örnekli bir şekilde öğreneceğiz.
HTML Attribute Nedir?
HTML attribute (özellik), bir HTML etiketine ek bilgi verir. Örneğin:
<a href="https://example.com">Ziyaret Et</a>Yukarıdaki örnekte href, bir özelliktir ve bağlantının hangi adrese yönlendireceğini tanımlar.
Başka bir örnek:
<img src="fotograf.jpg" id="kapak">Burada src özelliği görselin yolunu, id ise bu görselin sayfadaki adını belirtir.
JavaScript ile Attribute Okuma ve Değiştirme
Öncelikle JavaScript ile çalışmak istediğimiz HTML öğesini seçmemiz gerekir. Bunun için document.querySelector() gibi metotlar kullanılır.
Örnek 1: Görsel Üzerinden Çalışmak
Varsayalım ki HTML'de şöyle bir görsel var:
<img id="afis" src="film1.jpg">Bu görselin src ve id özelliklerini okumak ve değiştirmek için şu adımları izleriz:
Öğeyi Seçmek
const resim = document.querySelector("#afis");Özelliği Okumak
İki farklı şekilde yapılabilir:
- Doğrudan özelliğe erişerek:
console.log(resim.src); // Genellikle tam URL döner- getAttribute() metodu ile:
console.log(resim.getAttribute("src")); // HTML'deki değer döner: "film1.jpg"Bu iki yöntem genellikle aynı sonucu verir ama bazı durumlarda farklılık gösterebilir. Örneğin, .src bazen dosya yoluna otomatik olarak file:/// gibi bir ön ek ekleyebilir.
Özelliği Değiştirmek
Yine iki yöntemle yapılabilir:
- Doğrudan atama ile:
resim.src = "film2.jpg";- setAttribute() metodu ile:
resim.setAttribute("src", "film2.jpg");Bu komutlar sayesinde görselin değişmesini JavaScript ile gerçekleştirmiş oluruz.
Örnek 2: Bağlantı (Link) Üzerinde Çalışmak
<a id="git" href="https://eskiadres.com" title="Eski Sayfa">Git</a>Bu bağlantının href özelliğini güncellemek istersek:
const link = document.querySelector("#git");
// Eski değeri okuyalım
console.log(link.getAttribute("href")); // "https://eskiadres.com"
// Yeni bir adres verelim
link.setAttribute("href", "https://yenisayfa.com");Aynı zamanda title özelliğini de değiştirebiliriz:
link.setAttribute("title", "Yeni Sayfa");Doğrudan Özellik ile getAttribute Farkı
console.log(link.href); // JavaScript tarafından işlenmiş tam adres
console.log(link.getAttribute("href")); // HTML'deki orijinal adresAradaki fark, birincisinin tarayıcı tarafından düzenlenmiş olmasıdır. Çoğu zaman bu fark önemli değildir, ama teknik olarak bilinmesi gerekir.
Örnek 3: Input (Giriş) Öğesi ile Çalışmak
Şöyle bir input alanı düşünelim:
<input id="kullaniciadi" type="text">JavaScript ile bu öğeyi seçip type özelliğini değiştirebiliriz:
const input = document.querySelector("#kullaniciadi");
console.log(input.type); // "text"
input.type = "password"; // Artık bu bir şifre alanı oldu
input.setAttribute("type", "color"); // Artık bir renk seçici olduBazen form yapılarında, kullanıcıya göre input türünü değiştirmek gerekebilir. Bu tür işlemler sayesinde HTML'in esnekliğini artırabiliriz.
Daha Özgül Seçici Kullanmak
Sayfada birden fazla input etiketi varsa ve sadece type="text" olanı seçmek istiyorsak:
const metinKutusu = document.querySelector('input[type="text"]');Bu, sadece metin kutularını seçmemizi sağlar ve karışıklık yaratmaz.
Sonuç
Bu yazıda sadece JavaScript ile HTML attribute (özellik) işlemlerine odaklandık. Öğeleri seçmeyi, özelliklerini okumayı ve değiştirmeyi öğrendik. getAttribute() ve setAttribute() gibi metotlar ile .src, .type, .id gibi doğrudan özellik erişimleri arasındaki farkları gördük.
Kısacası:
- HTML’deki elementlerin özelliklerine ulaşabiliriz.
- Bu özellikleri okuyabilir ya da yeni bir değer verebiliriz.
- Aynı işe yarayan ama arka planda biraz farklı çalışan iki yöntem vardır.
Bir web sayfasını daha dinamik, kullanıcıya göre uyumlu hale getirmek için bu bilgiler temel yapı taşlarıdır. Bu konulara hâkim olan biri, web sayfasının içeriğini JavaScript ile canlı bir şekilde değiştirebilir.
