JS DOM Nedir?

Javascript (JS) DOM (Document Object Model), web sayfalarındaki HTML, CSS ve Javascript kodlarının birleştiği bir yapıdır. JS DOM, web sayfalarında bulunan elementlere erişim sağlamak ve bu elementler üzerinde değişiklik yapmak için kullanılır. Bir web tarayıcısı, bir web sayfasını yüklediğinde, bu sayfanın DOM’u oluşturulur ve tüm elementler ağaç yapısı şeklinde temsil edilir.

DOM ağacı, web sayfasındaki elementlerin hiyerarşik düzenini temsil eder. Root element olarak bilinen document elementi en üstte yer alır ve altında diğer elementler bulunur. Elementlere parentNode, childNode ve siblingNode gibi özellikler üzerinden erişilebilir.

DOM elemanlarına erişim için kullanılan yöntemlerden biri getElementById() fonksiyonudur. Bu fonksiyon, belirli bir “id” değerine sahip olan elementi seçmek için kullanılır. Örneğin, document.getElementById(“myElement”) şeklinde bir kod ile “myElement” id’sine sahip bir elemente erişebilirsiniz.

Bunun yanı sıra, getElementsByTagName() ve getElementsByClassName() gibi fonksiyonlar da kullanılabilir. İlk fonksiyon, belirli bir etikete sahip olan tüm elementleri seçmek için kullanılırken, ikinci fonksiyon belirli bir class adına sahip olan tüm elementleri seçmek için kullanılır.

  • getElementById(): ID değerine göre bir elementi seçer.
  • getElementsByTagName(): Etiket adına göre elementleri seçer.
  • getElementsByClassName(): Class adına göre elementleri seçer.
Fonksiyon Açıklama
getElementById() Belirli bir ID’ye sahip elementi seçer.
getElementsByTagName() Belirli bir etikete sahip olan tüm elementleri seçer.
getElementsByClassName() Belirli bir class adına sahip olan tüm elementleri seçer.

DOM Ağacı Nasıl Oluşur?

DOM ağacı, bir web sayfasının yapısını ve öğelerini temsil eden hiyerarşik bir yapıdır. Bu ağaç, HTML etiketleriyle oluşturulur ve web tarayıcısı tarafından otomatik olarak oluşturulur. DOM ağacının oluşumu, web tarayıcısının HTML kaynak kodunu işleyerek gerçekleşir.

DOM ağacının oluşum süreci, tarayıcının sayfayı yüklerken, HTML kaynak kodunu analiz etmesiyle başlar. Tarayıcı, HTML kodundaki etiketleri okur ve her bir etiketin bir DOM öğesi oluşturması gerektiğini belirler. Bu öğeler, ağaç yapısına göre sıralanır.

HTML belgesinin kökü, genellikle <html> etiketiyle temsil edilir. Bu etiket, DOM ağacının en üst düzeyinde yer alır ve tüm diğer öğeleri içerir. <html> etiketinden sonra, <head> ve <body> etiketleri yer alır. Bunlar da DOM ağacının alt öğelerini temsil eder.

DOM Elemanlarına Erişim Yöntemleri

DOM elemanlarına erişim yöntemleri web sayfalarınızdaki HTML elemanlarına kolayca erişim sağlamanızı sağlar. Bu, belirli HTML elemanlarını seçmek ve üzerlerinde işlemler yapmak için önemlidir. JavaScript ile DOM (Belge Nesne Modeli) kullanarak bu işlemi gerçekleştirebilirsiniz. DOM, HTML dokümanınızı bir ağaç yapısı olarak temsil eder. Bu ağaç yapısı üzerinde dolaşarak elemanlara erişebilir ve onları manipüle edebilirsiniz.

DOM elemanlarına erişim yöntemleri arasında en yaygın olanları getElementById() ve querySelector() metodlarıdır. getElementById() metodu, belirli bir id değeriyle eşleşen bir elemanı seçmenizi sağlar. Örneğin, document.getElementById(“myElement”) koduyla HTML sayfanızda “myElement” id’li bir elemana erişebilirsiniz. querySelector() metodu ise belirli bir CSS seçicisi altında eşleşen ilk elemanı seçmenizi sağlar. Örneğin, document.querySelector(“.myClass”) koduyla HTML sayfanızdaki “myClass” ile eşleşen ilk elemana erişebilirsiniz.

Bunların yanı sıra, DOM elemanlarına erişim yöntemleri arasında getElementsByTagName(), getElementsByClassName() ve querySelectorAll() gibi metotlar da bulunur. getElementsByTagName() metodu belirli bir etiket adıyla eşleşen tüm elemanları seçerken, getElementsByClassName() metodu belirli bir sınıf adıyla eşleşen tüm elemanları seçer. querySelectorAll() metodu ise belirli bir CSS seçicisi altında eşleşen tüm elemanları seçmenizi sağlar.

DOM Elemanlarını Değiştirme ve Manipülasyon

DOM (Document Object Model), web sayfalarının yapısını temsil eden bir ağaç yapısıdır. Bu ağaç yapısı, HTML veya XML belgesindeki her bir elemanı bir düğüm olarak temsil eder. Bu düğümler arasındaki ilişkileri gösteren bir yapıdır. DOM Elemanlarını Değiştirme ve Manipülasyon, DOM ağacındaki elemanlara erişerek içeriklerini değiştirmek veya manipüle etmek anlamına gelir.

DOM Elemanlarını Değiştirmek için çeşitli yöntemler vardır. Bunlardan biri element.innerHTML özelliğini kullanmaktır. Bu özellik, bir HTML elemanının içeriğini değiştirmek için kullanılır. Örneğin, bir <p> etiketinin içerisindeki metni değiştirmek için element.innerHTML = “Yeni metin” şeklinde bir kod kullanabiliriz.

DOM Elemanlarını Manipüle etmek için de farklı yöntemler mevcuttur. Örneğin, bir elemanın stilini değiştirmek için element.style özelliğini kullanabiliriz. Bu özellik üzerinden elemana özgü CSS özellikleri atayabilir ve elemanın görünümünü değiştirebiliriz.

  • element.innerText: Elementin içeriğini değiştirmek veya okumak için kullanılır.
  • element.setAttribute: Elemente yeni bir özellik eklemek veya mevcut bir özelliği değiştirmek için kullanılır.
  • element.classList: Elementin sınıflarını yönetmek için kullanılır. Sınıf eklemek, sınıf çıkarmak veya sınıfları kontrol etmek gibi işlemlerde kullanılır.
Métot Açıklama
innerHTML Elementin içeriğini alır veya değiştirir
textContent Elementin metin içeriğini alır veya değiştirir
setAttribute Elemente belirli bir nitelik atar veya belirtilen niteliği değiştirir

DOM Olayları ve İşleyiciler

DOM (Document Object Model), HTML belgesinin yapısını temsil eden bir ağaç yapısıdır. DOM olayları ve işleyiciler, web sayfalarında etkileşimi sağlamak için kullanılır. Bir olay, kullanıcının bir web sayfasında gerçekleştirdiği herhangi bir etkinliği temsil eder, örneğin bir düğmeye tıklama veya bir formu gönderme. İşleyiciler ise, belirli bir olay gerçekleştiğinde tetiklenen fonksiyonlardır. Bu yazıda, DOM olaylarını ve işleyicilerini daha ayrıntılı olarak inceleyeceğiz.

Bir DOM olayı, bir HTML elemanına bağlıdır. Örneğin, bir düğmenin üzerine tıklandığında “click” olayı tetiklenir. DOM olaylarını dinlemek ve işlemek için işleyiciler kullanılır. İşleyiciler, bir olay gerçekleştiğinde çalıştırılan JavaScript fonksiyonlarıdır. İşleyici fonksiyonları, HTML belgesindeki bir HTML elemanına atanabilir.

  • click: Kullanıcının bir elemana tıklaması olayını temsil eder.
  • mouseover: Kullanıcının bir elemanın üzerine gelmesi olayını temsil eder.
  • keydown: Kullanıcının bir tuşa basması olayını temsil eder.
Olay İsmi Açıklama
click Bir elemana tıklandığında tetiklenir.
mouseover Bir elemanın üzerine gelindiğinde tetiklenir.
keydown Bir tuşa basıldığında tetiklenir.

HTML belgesinde bir olay dinlemek için, addEventListener() yöntemi kullanılır. Bu yöntem, bir elemana belirli bir olayı dinlemek ve bir işleyici fonksiyonuna bağlamak için kullanılır. Örneğin, bir düğmeye tıklama olayını dinlemek için aşağıdaki kod kullanılabilir:

const myButton = document.getElementById(“myButton”);
myButton.addEventListener(“click”, myFunction);

Yukarıdaki kodda, “myButton” id’sine sahip bir düğmeye tıklandığında “myFunction” isimli bir fonksiyon tetiklenecektir. İşleyici fonksiyonunun HTML belgesine eklendiği noktada olay dinlemesi başlayacaktır.

DOM CSS Stillerini Değiştirme

DOM (Belge Nesne Modeli), web sayfanızın HTML yapısını ve içeriğini programatik olarak manipüle etmenizi sağlayan bir JavaScript API’sidir. DOM, web tarayıcısının temelini oluşturur ve kullanıcı etkileşimini kolaylaştırır. DOM CSS stilini değiştirmek ise, web sayfanızdaki elemanlara belirli stiller uygulamanızı sağlar. Böylece tasarım ve görünümü programatik olarak kontrol edebilirsiniz.

DOM aracılığıyla CSS stilini değiştirmek için, öncelikle hedeflenen elemana erişmeniz gerekmektedir. Bunun için çeşitli yöntemler bulunmaktadır. Örneğin, getElementById() yöntemiyle bir elemanı ID’sine göre seçebilirsiniz. Ayrıca, getElementsByClassName() veya getElementsByTagName() gibi diğer yöntemlerle de elemanlara ulaşabilirsiniz. Seçtiğiniz elemana eriştiğinizde, içerisindeki stil özelliklerini değiştirerek görünümünü kontrol edebilirsiniz.

HTML elemanlarına stil uygulamak için kullanabileceğiniz çeşitli CSS özellikleri vardır. Örneğin, elemanın renkini değiştirmek için style.color özelliğini kullanabilirsiniz. Benzer şekilde, background-color, font-family, font-size gibi diğer özelliklerle de elemanın stilini değiştirebilirsiniz. CSS özelliklerini doğrudan DOM üzerinden değiştirerek, sayfanızdaki elemanların görünümünü istediğiniz gibi özelleştirebilirsiniz.

  • getElementById() – Bir elemanı ID’sine göre seçmek için kullanılır.
  • getElementsByClassName() – Bir elemanı sınıf adına göre seçmek için kullanılır.
  • getElementsByTagName() – Belirli bir etikete sahip tüm elemanları seçmek için kullanılır.
CSS Özelliği Açıklama
color Bir elemanın metin rengini ayarlar
background-color Bir elemanın arka plan rengini ayarlar
font-family Bir elemanın metin fontunu ayarlar
font-size Bir elemanın metin boyutunu ayarlar

DOM Dinamik HTML Oluşturma

DOM (Document Object Model), bir web sayfasını temsil etmek ve onunla etkileşimde bulunmak için kullanılan bir programlama arayüzüdür. DOM, sayfadaki HTML elementlerine erişmek, onları değiştirmek ve yeni elementler oluşturmak için kullanılır. Bu yazıda, DOM’u kullanarak dinamik HTML oluşturmayı öğreneceğiz.

Bir web sayfasında dinamik HTML oluşturmak, sayfanın içeriğini veya yapısını değiştirmek anlamına gelir. Bu, kullanıcı etkileşimiyle gerçekleşebilir veya JavaScript tarafından kontrol edilebilir. DOM’un sağladığı yöntemlerle, mevcut elementlere erişebilir, yeni elementler oluşturabilir ve onları sayfaya ekleyebiliriz.

Sık Sorulan Sorular

JS DOM Nedir?

JS DOM, JavaScript Document Object Model’ın kısaltmasıdır. Web sayfalarını ve HTML dokümanlarını programlamak ve manipüle etmek için kullanılan bir JavaScript API setidir.

DOM Ağacı Nasıl Oluşur?

DOM ağacı, bir HTML dokümanının hiyerarşik yapısını temsil eder. Bu ağaç, HTML elementlerinin birbirleriyle olan ilişkilerini gösterir. HTML etiketleri ve içerikleri, ağaç yapısında düğüm olarak temsil edilir.

DOM Elemanlarına Erişim Yöntemleri Nelerdir?

DOM elemanlarına erişmek için çeşitli yöntemler kullanılabilir. getElementById() yöntemi ID özelliğine göre elemanı seçerken, getElementsByClassName() ve getElementsByTagName() yöntemleri sırasıyla sınıf adı ve etiket adına göre elemanları seçer. querySelector() ve querySelectorAll() yöntemleri ise CSS seçicilerini kullanarak elemanları seçer.

DOM Elemanlarını Değiştirme ve Manipülasyon Nasıl Yapılır?

DOM elemanları değiştirilebilir ve manipüle edilebilir. Örneğin, elemanların içerikleri (textContent) değiştirilebilir ve yeni elemanlar (createElement) eklenerek veya mevcut elemanlar (removeChild) kaldırılarak manipülasyon yapılabilir.

DOM Olayları ve İşleyiciler Nelerdir?

DOM olayları, kullanıcının bir HTML elementiyle etkileşime girdiği durumları temsil eder. Örneğin, bir düğmeye tıklandığında bir olay meydana gelir. Bu olaylara JavaScript ile işleyiciler eklenerek belirli bir işlem yapılması sağlanabilir.

DOM CSS Stillerini Değiştirme Nasıl Yapılır?

DOM ile CSS stilleri değiştirilebilir. JavaScript kullanarak element.style özelliği ile bir elemanın stil özelliklerine erişebilir ve değişiklik yapabilirsiniz. Örneğin, bir elemanın arka plan rengini değiştirebilir veya boyutunu ayarlayabilirsiniz.

DOM Dinamik HTML Oluşturma Nasıl Yapılır?

DOM ile dinamik olarak HTML oluşturulabilir. createElement() yöntemi ile yeni bir HTML elementi oluşturabilirsiniz. appendChild() yöntemi ile bu elementi başka bir elementin içine ekleyebilirsiniz. Böylece, yeni HTML içeriği oluşturabilir ve mevcut bir sayfaya ekleyebilirsiniz.

Web Asmek

JavaScript Dersleri

1

FacebookTwitterPinterestRedditLinkedinWhatsappTelegramEmailPrintShortlink

Diğer Yazılar ...

Yorumlar Devre Dışı Bırakıldı!