JavaScript Dilinde HTML DOM Kullanımı: Detaylı Rehber

Web sayfaları, tarayıcılar tarafından yüklenirken bir Belge Nesne Modeli (DOM) olarak yapılandırılır. Bu model, HTML belgesinin mantıksal yapısını temsil eder ve JavaScript'in web sayfasının içeriğine, yapısına ve stiline dinamik olarak erişmesini ve bunları değiştirmesini sağlayan bir API (Uygulama Programlama Arayüzü) sunar. Bu makale, JavaScript kullanarak HTML DOM ile nasıl etkileşim kuracağınızı, elementleri nasıl seçeceğinizi, içeriklerini ve stillerini nasıl değiştireceğinizi ve olayları nasıl yöneteceğinizi adım adım açıklayacaktır.

Temel Sözdizimi

JavaScript'in DOM ile etkileşim kurmasının temelinde, belgedeki HTML elementlerini seçmek ve ardından bu elementlerin özelliklerine veya metotlarına erişmek yatar. Aşağıdaki sözdizimleri, en yaygın DOM seçim ve manipülasyon yöntemlerini özetlemektedir:

// Element seçimi
document.getElementById("elementId");
document.getElementsByClassName("className");
document.getElementsByTagName("tagName");
document.querySelector("cssSelector");
document.querySelectorAll("cssSelector");

// Element özellikleri ve metotları
element.innerHTML;
element.textContent;
element.style.propertyName;
element.setAttribute("attributeName", "value");
element.classList.add("className");
element.addEventListener("eventName", functionHandler);
document.createElement("tagName");
parentElement.appendChild(childElement);
parentElement.removeChild(childElement);

Detaylı Açıklama

• document Nesnesi: DOM'a erişimin ana giriş noktasıdır. Tüm HTML belgesini temsil eder.

• Element Seçim Metotları:

  • document.getElementById("elementId"): Belirtilen id niteliğine sahip tek bir elementi döndürür. id'ler bir sayfada benzersiz olmalıdır.

  • document.getElementsByClassName("className"): Belirtilen sınıf adına sahip tüm elementleri içeren bir HTMLCollection döndürür. Canlı bir koleksiyondur, yani DOM'daki değişiklikler koleksiyonu otomatik olarak günceller.

  • document.getElementsByTagName("tagName"): Belirtilen etiket adına sahip tüm elementleri içeren bir HTMLCollection döndürür.

  • document.querySelector("cssSelector"): Belirtilen CSS seçici ile eşleşen belgedeki ilk elementi döndürür.

  • document.querySelectorAll("cssSelector"): Belirtilen CSS seçici ile eşleşen tüm elementleri içeren bir NodeList döndürür. Statik bir koleksiyondur.

• Element Özellikleri ve Metotları:

  • element.innerHTML: Bir elementin HTML içeriğini (alt elementler dahil) alır veya ayarlar. HTML etiketlerini yorumlar.

  • element.textContent: Bir elementin ve tüm alt elementlerinin metin içeriğini alır veya ayarlar. HTML etiketlerini metin olarak ele alır.

  • element.style.propertyName: Bir elementin CSS stil özelliklerine erişim sağlar. Örneğin, element.style.backgroundColor = "red";.

  • element.setAttribute("attributeName", "value"): Bir elementin belirtilen niteliğini ayarlar veya günceller. Örneğin, element.setAttribute("href", "https://example.com");.

  • element.classList: Bir elementin CSS sınıflarını yönetmek için bir dizi metot (add, remove, toggle, contains) sunar.

  • element.addEventListener("eventName", functionHandler): Bir elemente olay dinleyicisi ekler. Örneğin, bir butona tıklama olayını dinlemek için "click" kullanılır.

  • document.createElement("tagName"): Belirtilen etiket adıyla yeni bir HTML elementi oluşturur.

  • parentElement.appendChild(childElement): Belirtilen bir çocuğu, belirtilen ana elementin son çocuğu olarak ekler.

  • parentElement.removeChild(childElement): Belirtilen ana elementten belirtilen çocuğu kaldırır.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, JavaScript'in DOM ile nasıl etkileşim kurduğunu göstermektedir.

Örnek 1: Bir HTML Elementinin İçeriğini Güncelleme

Bu örnekte, bir paragraf elementinin metin içeriği JavaScript ile değiştirilmektedir.

Merhaba Dünya!

Örnek 2: Bir Elementin Stilini Değiştirme

Bu örnek, bir

    Bu bir kutu.

    
Mevcut Öğeler

Bana Tıkla
Henüz tıklanmadı.