DOM API, web sayfalarında yapısal olarak alınan bilgilerin işlenmesinde kullanılan önemli bir yazılım aracıdır Bu makalede, DOM API'nin çalışma prensipleri ve kullanımı hakkında detaylı bilgiler veriyoruz Teknik bir konu olmasına rağmen, açık ve anlaşılır bir dil kullanarak DOM API hakkında herkesin bilgi edinmesine yardımcı oluyoruz

DOM API (Document Object Model Application Programming Interface) HTML, XHTML veya XML belgelerine erişmek, bu belgeleri oluşturmak veya manipüle etmek için kullanılan bir arabirimdir. Web sayfalarının görsel tasarımı ve düzeni, HTML belgeleri üzerinde yapılan değişiklikler, dinamik içerikler ve animasyonlar, DOM API sayesinde oluşturulur ve yönetilir.

DOM ayrıca, web sayfalarının işlevselliğini artırmak için JavaScript gibi diller tarafından kullanılan standart bir arayüz sağlar. Bu sayede, web geliştiricileri, web uygulamaları ve oyunlar geliştirebilir, animasyonlar oluşturabilir ve web sayfalarının davranışını kontrol edebilirler.

DOM API, belgedeki her bir HTML etiketini bir nesne olarak ele alır ve bunlara özellikler ve yöntemler ekler. Bu nesneler, ayrıca, birbirleri üzerinde işlem yapmak için bir ağaç yapısı olarak organize edilirler. DOM ağacı, doküman nesnesini oluşturan tüm elementleri temsil eder ve bu nesnelerin birbirleriyle olan ilişkilerini ifade eder. Bu sayede, belgenin içeriği tamamen taranabilir ve manipüle edilebilir.

DOM Ağacı Oluşturma

DOM (Belge Nesne Modeli) Ağacı, bir HTML belgesindeki tüm öğelerin hiyerarşik bir açıklamasıdır. JavaScript kullanarak, DOM Ağacı oluşturabilir, elemanlara erişebilir, manipüle edebilir ve silinebilir. DOM Ağacı oluşturma adımları aşağıdaki gibidir:

• Belgenin body etiketinden başlayarak, her bir öğeyi dolaşarak bir ağaç oluşturun.
• Her bir öğe için bir DOM öğesi oluşturun ve öğenin özelliklerini ekleyin.
• Her bir öğenin ebeveynlerini bağlayın, böylece kök nesne body etiketidir.

DOM Ağacı, her bir öğenin ebeveynleri arasında ilişkileri açıkça gösteren bir ağaç yapısıdır. Örneğin, bir div öğesi içindeki bir p etiketi, bir alt öğedir ve div öğesi onun ebeveynidir. JavaScript kullanarak DOM Ağacı oluşturmak ve elemanları manipüle etmek oldukça kolaydır ve bu işlem, web sayfalarının dinamikliğini artırmak için çok önemlidir.

DOM Elemanlarına Erişim

DOM API, web sayfalarında yer alan her bir HTML elementine erişmek ve bu elementler üzerinde işlem yapmak için kullanılan bir araçtır. DOM Elemanlarına erişim, DOM API'nin en önemli özelliklerinden biridir.

DOM API, elemanlara erişmek için farklı yöntemler sağlar. Bunlar:

Elementleri "id" ile seçmek, DOM'da hızlı ve kolay bir şekilde erişim sağlar. Bu yöntemi kullanarak, tek bir elemente erişmek mümkündür. Örneğin:

const element = document.getElementById("example");

Yukarıdaki örnekte "getElementById" metodu kullanılmıştır. Bu metod, belirtilen ID özniteliğe sahip tek bir elementi seçer. Örneğin, bir butonun ID'sini seçmek için:

const button = document.getElementById("myButton");

getElementById, tek bir eleman seçmek için kullanıldığı için, daha kapsamlı seçimlerde kullanılmaz.

"querySelector" metodunun kullanımı ise daha esnektir. CSS seçicilerini kullanarak element seçilebilir. Bu sayede bir ID kullanmadan, etiket ismine, class adına veya diğer özelliklere göre seçim yapılabilir. Örneğin:

const element = document.querySelector("#example");

Bu örnekte "#example", elementin bir ID'si olduğunu belirtir.

Bir başka yöntem de elementleri etiket ismine, sınıf adına veya diğer özelliklere göre seçmektir.

Belirli bir etiket(isim) veya sınıf(adı) özniteliği olan birden fazla elementi seçmek için "getElementsByTagName" ve "getElementsByClassName" metodları kullanılır. Örneğin:

const elements = document.getElementsByTagName("div");const elements = document.getElementsByClassName("example");

"querySelectorAll" yöntemi, CSS seçicilerini kullanarak birden fazla elementi seçmek için kullanılır. Örneğin:

const elements = document.querySelectorAll("ul li");

Bu örnekte, "ul" öğesi içindeki "li" öğeleri seçildi.

By Id

DOM API'nin en sık kullanılan yöntemlerinden biri, elementleri id ile seçip manipüle etmek için sağladığı yöntemlerdir. HTML kodunda elementlere bir ID özelliği atanması, o elemana tekil bir kimlik verir ve bu kimlik okunabilirliği ve yönetilebilirliği artırır.

getElementById metodu tek bir eleman seçmek için kullanılır. Bir örnek senaryoda, bir form öğesi üzerinde işlem yapmak istediğimizi varsayalım.

var loginForm = document.getElementById('login-form');loginForm.addEventListener('submit', function(e){    e.preventDefault();    //Form submit işlemleri});            

querySelector metodu, CSS selectorleri kullanarak element seçmek için kullanılır. ID özellikleri ile arama yapmak için "#id" formatında yazılır. Aşağıdaki örnekte, bir div elementini seçmek için #main-container ID özelliğini kullanıyoruz.

var mainContainer = document.querySelector('#main-container');mainContainer.style.backgroundColor = 'red';            

ID kullanarak elementlere erişmek, DOM manipulation işlemlerinde hızlı ve etkili bir yöntemdir. Ancak, her elemana benzersiz bir ID atamak, büyük projelerde zor ve zaman alıcı bir iş olabilir. Bu durumda, farklı olaylarda elementleri diğer özellikleriyle seçmek için adını tag, class veya name özelliklerini kullanabilirsiniz.

getElementById Metodu

DOM API, JavaScript ile web sayfasındaki her bir elemanı bir ağaç yapısı şeklinde birbirine bağlar. Bu sayede, herhangi bir elemana tek tek ulaşmak mümkündür. Bunun için getElementById metodu kullanılır. Bu yöntem, sadece tek bir elemanı seçmek için kullanılır.

getElementById metodu, sayfa üzerindeki bir elemanı id özelliğine göre seçer. Böylece, seçilen elemanın özelliklerinde değişiklik yapılabilir. Bu yöntem, programlama yaparken oldukça sık kullanılır.

Örnek kullanımda, öncelikle seçilecek elemanın id özelliği kullanılarak belirlenir. Daha sonra, bu elemanın özelliklerine JavaScript ile erişilir.

• getElementById yöntemi yalnızca tek bir elemanı seçmek için kullanılır
• Seçilen elemanın id özelliği belirlenir ve element değişkenine atanır
• Seçilen elemanın özellikleri JavaScript kullanılarak değiştirilebilir

querySelector Metodu

DOM API, elementleri sadece id, tag, class ve name özellikleriyle değil, CSS selektörleri kullanarak da seçmek için bir yöntem sunar. Bu yöntem de querySelector metodudur. Bu metot, CSS selektörlerini kullanarak belirtilen bir elementi döndürür.

Örneğin, bir HTML sayfasında bulunan bir formun içindeki submit butonunu seçmek istediğimizi düşünelim. querySelector metodunu kullanarak bu butonu şu şekilde seçebiliriz:

    const submitBtn = document.querySelector('form input[type="submit"]');

Bu örnekte, CSS selektörleri ile input tipi submit olan buton seçilir ve seçilen buton submitBtn adı altında bir değişkene atanır. Bu değişken daha sonra başka amaçlarla kullanılabilir.

Ayrıca, querySelector metodu birden fazla seçici kullanarak birden fazla elementi de seçebilir. Örneğin;

    const listItems = document.querySelectorAll('ul li');

Bu örnekte, HTML sayfasında bulunan bir liste öğesi içerisindeki tüm li elemanları seçmek için querySelectorAll metodunu kullanıyoruz. Bu örnekte, selektör olarak "ul li" kullanıldı. Bu, ul etiketinin içindeki tüm li elemanlarını seçecektir.

querySelector metodunun kullanımı oldukça basittir ve CSS selektörleriyle element seçimini oldukça kolaylaştırır.

By Tag Name, Class Name ve Name Attribue

DOM API, web sayfalarının ağacıyerelliğinde programlanmasını sağlar. Bu ağaç bütününe DOM (Document Object Model) ağacı adı verilir. DOM API, ağaç yapısı içindeki elemanlara erişmek ve bu elemanlar üzerinde işlemler yapmak için kullanılır.

DOM elemanlarına erişmek için sağlanan yöntemlerden biri, elemanların tag, class veya name özellikleriyle seçilmesidir. Bu yöntemlerden faydalanarak, birden fazla eleman seçimi yapılabilir. Bu seçimler için kullanılan yöntemler şunlardır:

• getElementsByTagName: Belirli bir tag adına sahip tüm elemanları seçmek için kullanılır. Örneğin, p tag'ine sahip olan tüm elemanlar şu şekilde seçilebilir:

  document.getElementsByTagName("p");

• getElementsByClassName: Belirli bir class adına sahip tüm elemanları seçmek için kullanılır. Örneğin, class'ı "example" olan tüm elemanlar şu şekilde seçilebilir:

  document.getElementsByClassName("example");

• querySelectorAll: Css selektörleri kullanarak belirli özelliklere sahip tüm elemanları seçmek için kullanılır. Örneğin, class'ı "example" olan tüm p tag'leri şu şekilde seçilebilir:

  document.querySelectorAll("p.example");

Bu yöntemlerle seçilen elemanlar, bir NodeList objesi olarak döndürülür. Bu objeler üzerinde forEach() gibi döngüler kullanarak seçilen tüm elemanlara erişilebilir.

getElementsByTagName ve getElementsByClassName Metodları

DOM API, web sayfalarındaki elemanlara dinamik olarak erişim sağlayan bir arayüzdür. Bu arayüz sayesinde, JavaScript kullanarak web sayfalarındaki HTML, CSS ve diğer içeriklerin tamamına erişim sağlanabilir. DOM ağacı oluşturmak, elemanlara erişmek ve manipüle etmek için çeşitli metodlar kullanılır. getElementById ve querySelector metodlarının yanı sıra, belirli özelliklere sahip birden fazla elemanı seçmek için getElementsByTagName ve getElementsByClassName metodları kullanılır.

getElementsByTagName ve getElementsByClassName metodları, belirli özelliklere sahip birden fazla elemanı seçmek için kullanılır. Bu metodlar, DOM ağacındaki belirli tag, class veya name özelliğine sahip tüm elemanları seçmenize olanak tanır. Örneğin, getElementsByTagName('div') kullanarak tüm div elemanlarını seçebilirsiniz. Aynı şekilde, getElementsByClassName('classAdı') kullanarak belirli bir class adına sahip tüm elemanları seçebilirsiniz.

İkinci metod, daha özel bir seçim yapmak istediğinizde kullanışlıdır. Örneğin, belirli bir sayfada birden fazla div elemanı varsa, bu metodla sadece belirli bir class'a sahip div elemanlarını seçebilirsiniz. Kullanımı oldukça basit, yukarıdaki örneklerde olduğu gibi doğru özelliklere sahip tüm elemanları seçmek istediğiniz tag veya class ismini belirleyerek yapabilirsiniz. Yine de, sayfada çok fazla eleman varsa, seçim işlemi yavaşlayabilir, bu nedenle doğru elemanlara erişmek için diğer metodlar kullanılabilir.

Özetle, getElementsByTagName ve getElementsByClassName metodları DOM API'nin sunduğu seçim yöntemleri arasındadır. Ana avantajı, belirli özelliklere sahip birden fazla elemanı seçme kolaylığıdır. Websitelerinde tag veya class gibi özellikleri kullanarak seçim yapılacaksa bu metodlar kullanılabilir.

querySelectorAll Metodu

querySelectorAll Metodu: DOM API, birden fazla elemanı seçmek için çeşitli yöntemler sunar. Bu yöntemlerden biri de querySelectorAll() metodudur. CSS selektörlerini kullanarak belirli özelliklere sahip birden fazla elemanı seçmek için bu yöntemi kullanabilirsiniz.

querySelectorAll metodu parametre olarak CSS selektörü alır ve bu selektöre uyan tüm elemanları seçer. Bu seçilen elemanlar NodeList olarak belirtilir. NodeList, bir diziye benzer bir nesnedir ve NodeList elemanları, sayfa üzerindeki elemanların özelliklerini, metotlarını ve olaylarını içerir.

Örneğin, "div" etiketi kullanarak sayfadaki tüm div elemanlarını seçmek isterseniz, aşağıdaki kodu kullanabilirsiniz:

const divList = document.querySelectorAll("div");

Bu kod, tüm div elemanlarını NodeList olarak seçer ve divList değişkenine atar. NodeList üzerinde forEach() metodu kullanarak tüm elemanlarda işlemler yapabilirsiniz. Örneğin, tüm div elemanlarının içeriğini "Merhaba Dünya!" olarak değiştirmek için aşağıdaki kodu kullanabilirsiniz:

divList.forEach(div => {  div.textContent = "Merhaba Dünya!";});

Bu kod, tüm div elemanlarının içeriğini "Merhaba Dünya!" olarak değiştirir.

Bu yöntem ayrıca class ve id gibi diğer özelliklerle de kullanılabilir. Örneğin, "gizli" sınıfına sahip tüm elemanları seçmek isterseniz, aşağıdaki kodu kullanabilirsiniz:

const gizliElemanlar = document.querySelectorAll(".gizli");

Bu kod, "gizli" sınıfına sahip tüm elemanları NodeList olarak seçer ve gizliElemanlar değişkenine atar.

querySelectorAll yöntemi, sayfadaki birden fazla elemanı seçmek ve bunların özelliklerini veya içeriklerini manipüle etmek için son derece kullanışlıdır.

Manipülasyon

Manipülasyon, DOM API'nin en önemli özelliklerinden biridir. Bu özellik sayesinde, sayfadaki elemanlar üzerinde değişiklik yapabilir veya silme işlemleri gerçekleştirebiliriz.

Element özelliklerini değiştirmek için setAttribute ve getAttribute metodları kullanılabilir. Örneğin, belirli bir div elemanının class özelliği değiştirilebilir ya da yeni bir id eklenerek manipüle edilebilir.

Css classlarını üzerinde işlem yapmak için classList metodları kullanılır. Bu metodlar sayesinde, bir elemanın class özelliğine yeni değerler eklenerek, silinebilir ya da değiştirilebilir.

Element silme işlemleri için ise, removeChild, remove ve parentNode metodları kullanılır. RemoveChild, bir elementin ebeveyninden silinmesi işlemi için kullanılırken, remove ile direkt olarak element silinebilir. ParentNode ise, elementin ebeveyn elemanına erişimi sağlar ve bu sayede de silme işlemi gerçekleştirilebilir.

Manipülasyon işlemleri yaparken, dikkatli olunması gereken nokta, kullanıcı deneyimini olumsuz yönde etkilememektir. Bu nedenle, sayfa yüklendikten sonra manipülasyon işlemlerinin gerçekleştirilmesi önerilir. Ayrıca, kodların düzenli olması ve okunabilir olması da son derece önemlidir.

Manipülasyon işlemlerinde kullanılan yöntemler sayesinde, DOM API'nin sağladığı özelliklerden tam anlamıyla yararlanılabilir. Ancak, bu işlemler yapılırken, sayfa performansını da göz önünde bulundurmak gerekmektedir.

Element Özellikleri

HTML sayfalarında elemanların görüntüsü ve davranışları üzerinde değişiklik yapabilmek için element özelliklerinin değiştirilmesi gerekir. DOM API ile element özelliklerinin değiştirilmesi veya silinmesi işlemleri oldukça kolaydır.

Element özelliklerini değiştirmek için setAttribute() ve getAttribute() metotları kullanılır. setAttribute() metodu, seçilen bir elementin belirli bir özelliğine atanan bir değeri değiştirir veya ekler. getAttribute() metodu, seçilen bir elementin belirli bir özelliğini getirir. Bu metotlar, özellikle id ve class gibi sık kullanılan özelliklerde çok işe yararlar.

Örneğin, bir sayfadaki tüm p etiketlerinin class özelliğine "yeniP" adlı bir CSS sınıfı eklemek istiyorsanız, şu kodu kullanabilirsiniz:

let allPs = document.getElementsByTagName("p");for(let i = 0; i < allPs.length; i++) {    allPs[i].setAttribute("class", "yeniP");}

Bu kodda, document.getElementsByTagName() metodu ile tüm p etiketleri bir dizi olarak seçilir. Daha sonra bu dizi üzerinde forEach() metodu kullanarak her bir p elementinin class özelliğine "yeniP" sınıfı eklenir.

classList özellikleri de element özelliklerini değiştirmek için kullanılabilir. Bu özellikler, bir elementin class listesine erişmenizi ve elementin class özelliklerinin eklenmesini, kaldırılmasını veya değiştirilmesini sağlar.

Örneğin, bir sayfadaki bir div elementinin class özelliğine "yeniDiv" adlı bir sınıfı eklemek isterseniz, şu kodu kullanabilirsiniz:

let myDiv = document.getElementById("divID");myDiv.classList.add("yeniDiv");

Bu örnekte, getElementById() metodu ile sayfadaki bir div elementi seçilir ve classList.add() metodu kullanılarak "yeniDiv" sınıfı eklenir.

Element özelliklerini silmek için ise removeAttribute() metodu kullanılabilir. Bu metot, bir elementin belirli bir özelliğini kaldırır.

Örneğin, bir sayfadaki tüm img etiketlerinin alt özelliğini silmek istiyorsanız, şu kodu kullanabilirsiniz:

let allImgs = document.getElementsByTagName("img");for(let i = 0; i < allImgs.length; i++) {    allImgs[i].removeAttribute("alt");}

Bu kodda, document.getElementsByTagName() metodu ile tüm img etiketleri bir dizi olarak seçilir. Daha sonra bu dizi üzerinde forEach() metodu kullanarak her bir img elementinin alt özelliği kaldırılır.

setAttribute Ve getAttribute Metodları

DOM API'ının en temel özelliklerinden birisi de element özellikleri üzerinde değişiklik yapabilme kabiliyetidir. Bu değişiklik yöntemleri kullanarak element özelliklerini getirme veya değiştirme işlemi gerçekleştirilebilir.

setAttribute() metodu, element özelliklerine yeni bir değer atamak veya var olan bir değeri değiştirmek için kullanılır. Bu metot, özellik adı ve yeni değer parametreleri alan bir yöntemdir. Örneğin:

getAttribute() metodu ise element özelliklerinin değerlerini çekmek için kullanılır. Bu metodun tek parametresi, alınması istenen özellik adıdır. Örneğin:

• var imageSrc = document.getElementById("myImage").getAttribute("src");
• var linkHref = document.getElementById("myLink").getAttribute("href");

Bu yöntemler kullanılarak DOM API ile HTML öğelerinin özellikleri değiştirilebilir ve bu özelliklerin değerleri alınabilir.

classList Metodları

CSS classları, HTML sayfalarında elemanlara stillendirme uygulamak için kullanılır. DOM API'nin classList özelliği ile class manipülasyonu yapabilirsiniz.

Bu özellik sayesinde elemanlar üzerinde class ekleyebilir, çıkarabilir veya değiştirebilirsiniz. ClassList, add(), remove(), toggle() ve contains() metodlarını sağlar.

Örneğin, myElement.classList.add("red", "bold"); kodu, myElement adlı elemanın class özelliğine "red" ve "bold" classlarını ekler. Aynı şekilde, myElement.classList.remove("green"); kodu, myElement adlı elemanın class özelliğinden "green" classını siler.

toggle() metodu da oldukça kullanışlıdır. Örneğin, bir buton ile menü açıp kapama işlemleri yapacaksanız, butona basılınca menünün görünür veya görünmez olması için toggle() metodunu kullanabilirsiniz.

Element Silme Yöntemleri

• Element 1
• Element 2
• Element 3
• Element 4

removeChild, remove Ve parentNode Metodları

DOM API, elemanların silinmesi için de birçok yöntem sağlar. Bu yöntemler arasında en yaygın olarak kullanılanlar removeChild(), remove() ve parentNode() metodlarıdır.

• removeChild() metodu, bir parent elementin child'ını (alt elemanı) silmek için kullanılır. Bu metot, parent elementin childNodes özelliğindeki alt elemanı siler ve değişiklikleri geri alarak geri döndürür.
• remove() metodu, bir elementi DOM'dan silmek için kullanılır. Bu metot, silinecek olan elementi kaldırarak, değişiklikleri geri alarak belgeyi geri döndürür.
• parentNode() metodu, bir elementin parent elementini almak için kullanılır. Bu metot, seçilen elementin parent elementini döndürür.

Bu yöntemler özellikle veri içeren tablolar ve formlar gibi dinamik web sayfaları oluşturma sürecinde oldukça kullanışlıdır. Örneğin, kullanıcının belirli bir seçeneği kaldırmasına izin veren bir form üretmek oldukça yaygın bir örnektir. Aşağıdaki örnek, bir formdaki bir option elementinin parentNode() metodu kullanılarak silinmesini göstermektedir:

    let option = document.querySelector('#mySelect option[value="3"]');    option.parentNode.removeChild(option);

Yukarıdaki örnekte, "mySelect" id'sine sahip select elementinden 3 numaralı value değerine sahip option elementi parentNode() metodu kullanılarak kaldırılmaktadır. Bu örneği kullanarak, DOM API'nin eleman silme yöntemleri hakkında daha fazla bilgi edinebilirsiniz.

Olay Dinleyicileri

Olay dinleyicileri, DOM API'nin en önemli özelliklerinden biridir. Elemanların olayları üzerinde işlem yapmak için kullanılırlar. Addeventlistener() metodunu kullanarak olay dinleyicisi ekleyebilirsiniz. Bu yöntem sayesinde, mouse tıklamaları, mouse hareketleri, klavye tuşları vb. olaylara yanıt verebilirsiniz.

Addeventlistener() metodunu kullanarak, dinlenecek olay türünü belirleyebilir, işlevi belirleyebilir ve varsa yanıt olarak iletilen argümanları ekleyebilirsiniz. Olayın nasıl tetikleneceğini belirleyebilirsiniz: burada, üç parametre kullanılır - olayın ismi, olayın yanıt olarak tetikleyeceği işlem ve olayın yakalanıp yakalanmayacağı. Bu işlem özellikle, web uygulamalarında kullanıcının davranışları üzerinde işlem yapmak istediğinizde çok yararlıdır.

Bu arada, bir özellik olan DOMContentLoaded olayı da takip edilebilir. Sayfa gösterildikten sonra olay dinleyicisi eklenmesi için kullanılır. Bu, sayfanın yüklenmesi tamamlanmadan önce olayların yakalanmasını sağlar. Ayrıca, event objesi de olay dinleyicileri içinde kullanılır. Bu obje, olay durumu hakkında bilgiler tutar ve olaya yanıt olarak işlevlerin içinde kullanılabilir.

Olay dinleyicileri, web uygulamaları oluştururken oldukça yararlıdır. Kullanıcının seçimleri, yanıtlar vb. üzerinde işlem yapmak isteyen geliştiriciler, eventlistener() yöntemine başvurabilir. Bu yöntem sayesinde, kendi web uygulamanızdaki elemanların davranışlarına yanıt verebilirsiniz.

Addeventlistener Metodu

Addeventlistener metodu, DOM elemanlarının olayları üzerinde işlem yapmak için kullanılan yöntemdir. Bu yöntem, belirli bir elemana bir olay dinleyicisi eklemek için kullanılır. Addeventlistener metodu, bir dize, bir fonksiyon ve bir Boolean değer alır. Dize, olayın türünü belirtir (Örnek: "click"). Fonksiyon, olay tetiklendiğinde yapılacak işlemi belirtir. Boolean değer, olayı yakalama veya bubbling'i kullanıp kullanmayacağını belirler.

Addeventlistener yöntemi, özellikle modern web uygulamalarında oldukça kullanışlıdır. Bu yöntem sayesinde, bir elemanın birden fazla olay dinleyicisi ekleyebilirsiniz. Böylece, yapılmak istenen çeşitli işlemleri farklı dinleyicilerde toplayarak daha organize bir yapı oluşturabilirsiniz.

Örneğin, aşağıdaki kod bloğunda "click" olayı tetiklendiğinde, göster() fonksiyonu çağrılacaktır:

```htmlTıkla Beni!

```

Bu örnekte, HTML'de bir düğme oluşturduk ve sonra JavaScript kullanarak dinleyici ekledik. Daha sonra bu dinleyici tetiklendiğinde çağrılacak bir fonksiyon tanımladık. Bu örnekte, bir tıklandığında bir "Merhaba Dünya!" mesajı görüntülenir.

Addeventlistener yöntemi, birçok olay türü için kullanılabilir. Örneğin, "mouseover" olayı, fare imleci bir öğenin üzerine taşındığında tetiklenebilir. "keydown" olayı, bir tuşun basılması tetiklenebilir. Bu örneklerde, olay tipini belirtmek için addEventListener yöntemi kullanılır ve ardından olay dinleyicisi fonksiyonu belirtilir.

Addeventlistener yöntemi, modern web geliştirme sürecinde oldukça yararlı bir araçtır ve kullanımı oldukça kolaydır. Yalnızca birkaç adımda, farklı olaylara dinleyiciler ekleyebilir ve kullanıcıların web sayfamızda etkileşim kurmalarını sağlayabiliriz.

DOMContentLoaded Olayı

DOMContentLoaded olayı, sayfanın tüm içeriğinin yüklenmesinden sonra olay dinleyicilerini eklemek için kullanılan bir yöntemdir. Bu yöntem sayesinde, sayfanın yüklenmesiyle birlikte olayların hemen tetiklenmesinin önüne geçilir ve bütün içerikler yüklendikten sonra olay dinleyicileri eklenir.

Bu olayın kullanımı aşağıdaki gibidir:

Yukarıdaki örnekte, sayfa tamamen yüklendikten sonra bir konsol mesajı görüntülenir.

DOMContentLoaded olayının kullanımı, sayfanın daha hızlı yüklenmesi ve olayların daha doğru bir şekilde yönetilmesi için oldukça faydalıdır.

Event Objesi

DOM API ile birlikte elemanların olayları üzerinde işlem yapmamızı sağlayan event objesi, olay dinleyicileri içinde kullanılan bir objedir. Bu obje, olayın tipine ve tetiklenme şekline göre farklı özelliklere sahiptir.

Bu özellikler arasında en yaygın olanları type, target, current target, bubbles ve cancelable'dir. Type, olayın tipini temsil ederken target ise olayın başladığı elemanı gösterir. Current target ise olayın işlendiği elemanı gösterir. Bubbles özelliği, olayın üst seviye elemanlara doğru yayılıp yayılmayacağını belirtir. Eğer bubbles değeri true ise, olayın yolu boyunca her elemana yayılması beklenir. Cancelable ise, olayın iptal edilebilir olup olmadığını belirtir.

Bir örnek düşünelim. Sayfadaki bir butona tıkladığımızda, click olayı tetiklenir. Bu olaya ait event objesi içerisinde, butonun hangi element olduğu, olayın tipi gibi özellikler bulunur. Bu özellikler aracılığıyla, olayın nasıl gerçekleştiğini ve hangi elemanda gerçekleştiğini öğrenebiliriz.

Bunun yanı sıra, event objesi içinde farklı metodlar da bulunur. Bu metodlar arasında en sık kullanılanları preventDefault ve stopPropagation'dır. PreventDefault metodunu kullanarak, bir olayın varsayılan davranışını engelleyebiliriz. Örneğin, bir link'e tıkladığımızda sayfanın yenilenmesini engellemek için bu metod kullanılabilir. StopPropagation metodunu kullanarak ise, olayın daha üst elemanlara yayılmasını engelleyebiliriz.

Event objesi, DOM API'nin vazgeçilmezlerinden biridir. Elemanların olayları üzerinde işlem yapmak istediğimizde, event objesi içindeki özellikler ve metodlar sayesinde işimizi kolaylaştırır. Bu nedenle, JavaScript ve DOM ile çalışırken event objesi hakkında bilgi sahibi olmak önemlidir.