odinallfather
Hectopat
Daha fazla
- Cinsiyet
- Erkek
JavaScript, modern web geliştirme için vazgeçilmez bir araçtır ve en güçlü özelliklerinden biri de Document Object Model (DOM) ile etkileşimde bulunabilmesidir. DOM, web sayfasının yapısını temsil eden bir modeldir ve JavaScript ile bu model üzerinde değişiklikler yaparak dinamik ve interaktif web sayfaları oluşturabiliriz.
DOM Nedir?
DOM, HTML ve XML belgelerinin yapısal temsilidir. Bu yapı, belgeyi düğüm (node) olarak adlandırılan nesneler hiyerarşisi şeklinde tanımlar. Bu düğümler, elementler, metinler, yorumlar gibi sayfa içeriğinin farklı parçalarını temsil eder. JavaScript ile DOM'a erişebilir, düğümleri manipüle edebilir, yeni düğümler ekleyebilir veya var olanları kaldırabiliriz.
DOM'a Erişim
JavaScript ile DOM'a erişmenin en yaygın yolları getElementById, getElementsByClassName, getElementsByTagName, querySelector ve querySelectorAll gibi yöntemlerdir.
JavaScript:
// Bir elemente ID ile erişmek
let elementById = document.getElementById('myId');
// Birden fazla elementi sınıf adıyla erişmek
let elementsByClassName = document.getElementsByClassName('myClass');
// Birden fazla elementi etiket adıyla erişmek
let elementsByTagName = document.getElementsByTagName('div');
// CSS seçici kullanarak bir elemente erişmek
let elementByQuerySelector = document.querySelector('.myClass');
// CSS seçici kullanarak birden fazla elemente erişmek
let elementsByQuerySelectorAll = document.querySelectorAll('.myClass');İçerik Manipülasyonu
DOM elemanlarının içeriğini değiştirmek için innerHTML, textContent ve innerText gibi özellikler kullanılır.
JavaScript:
// Elementin HTML içeriğini değiştirmek
elementById.innerHTML = '<p>Yeni içerik</p>';
// Elementin metin içeriğini değiştirmek
elementById.textContent = 'Yeni metin içeriği';Stil ve Sınıf Manipülasyonu
Elementlerin stillerini değiştirmek ve sınıflarını yönetmek için style özelliği ve classList yöntemi kullanılır.
JavaScript:
// Elementin stilini değiştirmek
elementById.style.color = 'red';
elementById.style.fontSize = '20px';
// Elementin sınıfını eklemek/kaldırmak
elementById.classList.add('yeni-sinif');
elementById.classList.remove('eski-sinif');
elementById.classList.toggle('aktif');Yeni Elemanlar Eklemek ve Mevcut Elemanları Kaldırmak
Yeni elemanlar oluşturmak ve bunları DOM'a eklemek için createElement, appendChild, insertBefore gibi yöntemler kullanılır. Elemanları kaldırmak için removeChild yöntemi kullanılır.
JavaScript:
// Yeni bir eleman oluşturmak
let yeniEleman = document.createElement('div');
yeniEleman.textContent = 'Yeni div elemanı';
// Yeni elemanı bir başka elemanın içine eklemek
document.body.appendChild(yeniEleman);
// Mevcut bir elemanı kaldırmak
let kaldirilanEleman = document.body.removeChild(yeniEleman);Olay Dinleyicileri Eklemek
JavaScript ile DOM üzerinde etkileşim kurmanın bir diğer önemli yönü, olay dinleyicileri eklemektir. Bu, kullanıcı etkileşimlerine (tıklama, fare hareketleri, klavye girdileri vb.) yanıt vermemizi sağlar.
JavaScript:
// Bir butona tıklama olayı eklemek
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Butona tıklandı!');
});
