JavaScript Görüntüleme Nesneleri
JavaScript’te görüntüleme nesneleri, kullanıcı arayüzü (UI) oluşturmak ve kullanıcı etkileşimlerini yönetmek için kullanılan nesnelerdir. Bu nesneler, genellikle tarayıcı ortamında çalışır ve HTML elementlerine erişim sağlar. Bu makalede, JavaScript görüntüleme nesnelerini ve örneklerini inceleyeceğiz.
1. DOM (Document Object Model) Nedir?
DOM, bir web sayfasının yapısını temsil eden bir nesne modelidir. JavaScript, DOM üzerinden HTML elementlerine erişebilir ve bu elementleri değiştirebilir. DOM, HTML belgesini bir ağaç yapısı olarak temsil eder.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>DOM Örneği</title>
</head>
<body>
<h1 id="baslik">Merhaba Dünya!</h1>
<p id="metin">Bu bir örnek metindir.</p>
<script>
let baslik = document.getElementById("baslik");
console.log(baslik.textContent); // Çıktı: Merhaba Dünya!
</script>
</body>
</html>2. DOM Elementlerine Erişim
JavaScript, DOM elementlerine erişmek için çeşitli metotlar sunar.
a) getElementById()
Belirli bir id özelliğine sahip elementi bulur.
Örnek:
let baslik = document.getElementById("baslik");
console.log(baslik.textContent); // Çıktı: Merhaba Dünya!b) getElementsByClassName()
Belirli bir sınıf adına sahip tüm elementleri bulur.
Örnek:
let elements = document.getElementsByClassName("sinif");
for (let element of elements) {
console.log(element.textContent);
}c) getElementsByTagName()
Belirli bir etiket adına sahip tüm elementleri bulur.
Örnek:
let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
console.log(p.textContent);
}d) querySelector() ve querySelectorAll()
CSS seçicileri kullanarak elementleri bulur. querySelector ilk eşleşen elementi, querySelectorAll tüm eşleşen elementleri döndürür.
Örnek:
let baslik = document.querySelector("#baslik");
console.log(baslik.textContent); // Çıktı: Merhaba Dünya!
let paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => console.log(p.textContent));3. DOM Elementlerini Değiştirme
JavaScript, DOM elementlerinin içeriğini, stilini ve diğer özelliklerini değiştirebilir.
a) İçerik Değiştirme
textContent veya innerHTML kullanılarak elementin içeriği değiştirilebilir.
Örnek:
let baslik = document.getElementById("baslik");
baslik.textContent = "Yeni Başlık!";
baslik.innerHTML = "<em>Yeni Başlık!</em>";b) Stil Değiştirme
style özelliği kullanılarak elementin stili değiştirilebilir.
Örnek:
let baslik = document.getElementById("baslik");
baslik.style.color = "red";
baslik.style.fontSize = "24px";c) Özellik Değiştirme
setAttribute veya doğrudan özellik erişimi kullanılarak element özellikleri değiştirilebilir.
Örnek:
let resim = document.getElementById("resim");
resim.src = "yeni-resim.jpg";
resim.setAttribute("alt", "Yeni Resim Açıklaması");4. DOM Elementlerini Oluşturma ve Ekleme
JavaScript, yeni DOM elementleri oluşturabilir ve bunları mevcut elementlere ekleyebilir.
a) Element Oluşturma
createElement metodu kullanılarak yeni bir element oluşturulur.
Örnek:
let yeniParagraf = document.createElement("p");
yeniParagraf.textContent = "Bu yeni bir paragraf!";b) Element Ekleme
appendChild veya insertBefore metotları kullanılarak yeni elementler eklenebilir.
Örnek:
let body = document.body;
body.appendChild(yeniParagraf);5. DOM Elementlerini Silme
JavaScript, DOM elementlerini silmek için removeChild veya remove metotlarını kullanır.
Örnek:
let eskiParagraf = document.getElementById("eskiParagraf");
eskiParagraf.remove(); // Elementi doğrudan siler
// veya
let parent = eskiParagraf.parentElement;
parent.removeChild(eskiParagraf);6. Olay Dinleyicileri (Event Listeners)
JavaScript, kullanıcı etkileşimlerini yakalamak için olay dinleyicileri kullanır.
Örnek:
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Butona tıklandı!");
});7. Form İşlemleri
JavaScript, form verilerini işlemek ve doğrulamak için kullanılabilir.
Örnek:
<form id="myForm">
<input type="text" id="name" placeholder="Adınız">
<button type="submit">Gönder</button>
</form>
<script>
let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // Formun gönderilmesini engelle
let name = document.getElementById("name").value;
alert("Merhaba, " + name + "!");
});
</script>8. AJAX ve Fetch API
JavaScript, sunucu ile asenkron iletişim kurmak için XMLHttpRequest veya Fetch API kullanır.
Örnek (Fetch API):
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));Sonuç
JavaScript görüntüleme nesneleri, web sayfalarının dinamik ve interaktif hale getirilmesinde önemli bir rol oynar. Bu makalede, DOM elementlerine erişim, değiştirme, oluşturma, silme, olay dinleyicileri, form işlemleri ve AJAX gibi temel kavramları örneklerle açıkladık. Bu yöntemleri kullanarak, kullanıcı dostu ve etkileşimli web uygulamaları geliştirebilirsiniz. JavaScript görüntüleme nesneleri, modern web geliştirmede vazgeçilmez bir yapı taşıdır.
