HTML DOM, “Document Object Model” (Belge Nesne Modeli) anlamına gelir ve HTML veya XML belgelerini programatik olarak temsil eden bir yapıdır. Web tarayıcıları, HTML ve XML belgelerini bir ağaç yapısı şeklinde işler ve bu yapıyı DOM aracılığıyla JavaScript gibi dillerle dinamik olarak değiştirebilmenizi sağlar.
İşte HTML DOM’un temel özellikleri:
- Ağaç Yapısı: HTML belgesi bir ağaç yapısına dönüştürülür. Her HTML etiketi, bu ağaçta bir düğüm olarak temsil edilir. Örneğin,
<html>kök düğümüdür,<head>ve<body>onun çocuk düğümleridir. - Nesne Temsili: DOM, her HTML etiketi, öznitelik ve metin içeriğini nesneler olarak temsil eder. Bu nesneler, JavaScript ile erişilebilir ve değiştirilebilir.
- Dinamik Manipülasyon: JavaScript kullanarak HTML içeriğini dinamik olarak değiştirebilir, stilini değiştirebilir ve etkileşimli özellikler ekleyebilirsiniz. Örneğin, bir butona tıklandığında bir paragrafın içeriğini değiştirmek mümkündür.
- Event Handling (Olay Yönetimi): DOM, kullanıcı etkileşimlerine (tıklamalar, klavye girişleri vb.) yanıt vermenizi sağlar. Bu olaylar, JavaScript kullanılarak işlenebilir.
Örnek olarak, aşağıdaki HTML belgesi ve JavaScript kodu ile bir DOM işlemi nasıl yapılır:
htmlKodu kopyala<!DOCTYPE html>
<html>
<head>
<title>DOM Örneği</title>
</head>
<body>
<h1 id="başlık">Merhaba Dünya!</h1>
<button id="değiştirButon">Başlığı Değiştir</button>
<script>
// JavaScript kodu ile DOM'a erişim
document.getElementById('değiştirButon').addEventListener('click', function() {
document.getElementById('başlık').textContent = 'Başlık Değişti!';
});
</script>
</body>
</html>
Bu kodda, kullanıcı “Başlığı Değiştir” butonuna tıkladığında, JavaScript kodu textContent özelliğini kullanarak <h1> etiketinin içeriğini değiştirir. Bu işlem, DOM’un nasıl manipüle edilebileceğini gösterir.
