JS ile Dom Kontrolü

DOM Nesneleri Nelerdir?

Bir dakika, önce şunun bir adını koyalım. DOM nesnesi dediğimiz şey, html taglarının bütünü. Yani o div span table ul li gibi etiketlerin tamamına DOM diyoruz. Document Modal Object ‘den geliyor adı. Ben de az önce googlelayarak öğrendim. Ayrıca dominant erkek demek de oluyormuş. Bir anda google aramam çok enteresan yerlere gidiyordu, son anda durdum.

DOM nesnelerini bulma

JS dosyamız içerisinden, js dosyamızın ekli olduğu sayfa içerisindeki bir html etiketini bularak başlıyoruz işe. Örneğin diyelim ana menümüzü kontrol eden bu ul listemiz olsun.

ANA MENU
HAKKIMDA
ÇALIŞMALARIM
REFERANSLARIM
İLETİŞİM

Yukarıdaki listedeki bazı DOM elementlerinin id ya da class gibi özellikleri var. JS ‘de bir elementi bulurken en çok bu özelliklerden yararlanıyoruz.

mainmenu classını tanımladığımız ul nesnesini bularak başlayalım JS dosyamızda.

getElementById()

let mainmenu = document.getElementById("mainmenu");
console.log(mainmenu);

Yukarıdaki komut kendini açıklar nitelikte. mainmenu değişkenini listemize eşitlerken, ilk olarak *document* değişkenini kullandık. Bu değişken html sayfasının tamamını temsil ediyor. *getElementById* fonksiyonu ise, tamamen isminin işini yapıyor. *id* özelliğine göre tüm DOM ları tarayarak, o isime ait *id* taşıyan nesneyi buluyor.

Burada dikkat edilmesi gereken, prensip olarak bir web sayfasında, aynı id ismine sahip iki DOM nesnesi olmayacağıdır. Bu nedenle JS dosyası bize tek bir DOM nesnesi döndürüp çekiliyor. *console.log* fonksiyonu ile de, gerçekten ilgili nesneyi bulup bulmadığını da kontrol edebiliriz.

getElementsByClassName()

Hey maşşallah, fonksiyon adı evlere şenlik ama oldukça açıklayıcı. Tıpkı isminin söylediği gibi, bu fonksiyon bize, bu class adını taşıyan bütün DOM nesnelerini bir liste halinde getiriyor.

*menulink* class ismine sahip olan li nesnelerimizi bir Array ’e çevirip console.log ile basalım.

let menulinks = document.getElementByClassName("menulink");
Array.from(menulinks).forEach((menulink) => {
  console.log(menulink);
});

querySelector()

Bu yakışıklı fonksiyonumuz ise, idmiş, classmış bakmadan, her ikisi için de sorgulama yapabileceğiniz bir tane. Tıpkı CSS de olduğu gibi “.” ya da “#” işaretlerini kullanarak aradığımız DOM nesnesinin belirleyici özelliğini gönderiyoruz. Yani eğer bir id arıyorsak, id adının başına # koyuyoruz, bir class arıyorsak başına . koyuyoruz.

let mainmenu = document.querySelector("#mainmenu");
console.log(mainmenu);

Yukarıdaki kod ile, yine mainmenu isimli idye sahip ul nesnemize ulaşabiliyoruz.

DOM Nesnelerini Değiştirme

Tamam, aradık, buldum bu DOM arkadaşları ama biraz da kurcalayalım. Örnek olması için, yine aynı mainmenu listemizi manipüle ederek devam edelim. Mesela, tıkladığımız li elementlerinin içeriğini alert olarak ekrana basalım.

let menulinks = document.getElementsByClassName("menulink");
Array.from(menulinks).forEach((menulink) => {
  menulink.addEventListener("click", (e) => {
    alert(menulink.innerHTML);
  });
});

Yukarıdaki kod bloğunda, daha önce yaptığım gibi menulink nesnelerini teker teker alıp, innerHTML özelliklerini ekrana alert olarak bastım. innerHTML temel olarak, bir DOM nesnesinin içerisinde tuttuğu veriyor deniyor. Mesela;

Merhaba, dünya!

yukardaki div DOM nesnesinin innerHTML özelliği bize *Merhaba, dünya!* değerini döndürür. Bu özelliği bir şeye eşitleyerek, o DOM elementini de değiştirebiliriz. Örneğin;

let menulinks = document.getElementsByClassName("menulink");
Array.from(menulinks).forEach((menulink) => {
  menulink.addEventListener("click", (e) => {
    menulink.innerHTML = "Bana tıklarsın ha!!";
  });
});

yukardaki kod bloğu, tıklanan her bir li nesnesinin yazısını değiştiriyor. İnanmazsan kendin bak;

Style değişiklikleri

Elbette innerHTML kadar, stil değişiklikleri de sıklıkla kullanılan şeyler. Hemen bunu gerçekleştirmek için gerekli sytaxı birlikte inceleyelim. Aynı örneğimiz üzerinden gidersek, bu sefer, tıklanan her bir li öğesinin rengini kırmızı yapalım.

let menulinks = document.getElementsByClassName("menulink");
Array.from(menulinks).forEach((menulink) => {
  menulink.addEventListener("click", (e) => {
    menulink.style.color = "red";
  });
});

Yukardaki kod bloğundan da anlaşılacağı gibi, doğrudan elementin style özelliğine, hangi stili manipüle edeceğimizi giriyoruz. Buradaki stil parametreleri, doğrudan CSS parametleri ile aynı değildir. Örneğin background-color yerine backgroundColor yazılıyor. Tüm stil isimlerini bu linki ziyaret edebilirsiniz.