JavaScript DOM Kullanım Kılavuzu

Javascript DOM (Belge Nesne Modeli), geliştiricilerin bir web sitesinin içeriğini, yapısını ve stilini değiştirmesine olanak tanıyan bir arayüzdür. Bu yazıda, DOM’nin ne olduğunu ve Javascript kullanarak onu nasıl değiştirebileceğinizi öğreneceğiz. Bu makale aynı zamanda temel DOM işlemleri için referans olarak da kullanılabilir.

DOM Nedir?

En temel düzeyde, bir web sitesi bir HTML ve CSS belgesinden oluşur. Tarayıcı, Belge Nesne Modeli (DOM) olarak bilinen belgenin bir temsilini oluşturur. Bu belge, Javascript’in bir web sitesinin öğelerine ve stillerine erişmesini ve bunları değiştirmesini sağlar. Model, nesnelerin ağaç yapısında oluşturulmuştur ve şunları tanımlar:

• Nesne olarak HTML öğeleri
• HTML öğelerinin özellikleri ve olayları
• HTML öğelerine erişme yöntemleri

Elemanların yerleri düğüm olarak adlandırılır. Yalnızca öğeler düğüm almakla kalmaz, aynı zamanda öğelerin ve metnin nitelikleri de kendi düğümlerini (nitelik düğümleri ve metin düğümleri) alır.

DOM Document

DOM Document, web sayfanızdaki diğer tüm nesnelerin sahibidir. Web sayfanızdaki herhangi bir nesneye erişmek istiyorsanız, her zaman document ile başlamanız gerektiği anlamına gelir. Ayrıca, web sitemize erişmemizi ve değiştirmemizi sağlayan birçok önemli özellik ve yöntem içerir.

HTML Öğelerini Bulma

Artık DOM belgesinin ne olduğunu anladığımıza göre, ilk HTML öğelerimizi almaya başlayabiliriz. Javascript DOM kullanarak bunu yapmanın birçok farklı yolu vardır, burada en yaygın olanları şunlardır:

Öğeyi Id’ye Göre Alma

GetElementById() yöntemi, id tarafından tek bir eleman elde etmek için kullanılır. Örneğe bakalım:

var title = document.getElementById("header-title");

Burada header id’sine sahip öğeyi alıyoruz ve onu bir değişkene kaydediyoruz.

Öğeleri Class Adına Göre Alma

getElementsByClassName() kullanarak birden fazla nesne elde edebiliriz.

var items = document.getElementsByClassName("list-items");

Öğeyi Etiket Adına Göre Alma

getElementsByTagName() kullanarak öğelerimizi etiket adına göre de alabiliriz.

var listItems = document.getElementsByTagName("li");

Queryselector

QuerySelector() yöntemi, belirtilen eşleşen ilk elemanını döndürür. Bu, öğeleri id, class, tagName ve diğer tüm geçerli CSS seçicilerine göre alabileceğiniz anlamına gelir. Burada sadece en popüler seçeneklerden birkaçını listeliyorum.

ID’ye göre al

var header = document.querySelector("#header")

Class’a göre al

var items = document.querySelector(".list-items")

Etiket’e göre al

var headings = document.querySelector("h1");

Daha spesifik öğeler alın

CSS Seçicileri kullanarak daha spesifik öğeler elde edebiliriz.

document.querySelector("h1.heading");

Queryselectorall

QuerySelectorAll() metodu querySelector() ile tamamen aynıdır. CSS Seçici uyan tüm elemanları döndürmesi dışında.

document.querySelectorAll("h1.heading");

HTML Öğelerini Değiştirme

HTML DOM, özelliklerini değiştirerek bir HTML öğesinin içeriğini ve stilini değiştirmemize olanak tanır.

HTML değiştirme

innerHTML özelliği, bir HTML öğesinin içeriğini değiştirmek için kullanılabilir.

document.getElementById("#header").innerHTML = "Hello World!";

Bu örnekte, üstbilgi kimliğine sahip öğeyi alıyoruz ve iç içeriği “Merhaba Dünya!” olarak ayarlıyoruz. InnerHTML, etiketleri başka bir etikete koymak için de kullanılabilir.

document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

Burada zaten var olan tüm div’lere bir h1 etiketi ekliyoruz.

Bir özelliğin değerini değiştirme

DOM’yi kullanarak bir özniteliğin değerini de değiştirebilirsiniz.

document.getElementsByTag("img").src = "test.jpg";

Stili değiştirme

Bir HTML öğesinin stilini değiştirmek için, öğelerimizin stil özelliğini değiştirmemiz gerekir. Stilleri değiştirmek için örnek bir sözdizimi:

document.getElementById(id).style.property = new style

Şimdi bir eleman aldığımız ve alt kenarlığı düz siyah bir çizgiyle değiştirdiğimiz bir örneğe bakalım:

document.getElementsByTag("h1").style.borderBottom = "solid 3px #000";

CSS özelliklerinin normal css özellik adı yerine camelcase içinde yazılması gerekir. Bu örnekte border-bottom yerine borderBottom kullandık.

Öğe ekleme ve silme

Şimdi yeni elementleri nasıl ekleyebileceğimize ve var olanları nasıl silebileceğimize bir göz atacağız.

Öğe ekleme

var div = document.createElement("div");

Burada createElement()kullanarak bir div öğesi oluşturuyoruz. parametre olarak bir etiket adı alan ve onu bir değişkene kaydeden yöntemini . Bundan sonra, ona biraz içerik vermemiz ve ardından DOM belgemize eklememiz gerekiyor.

var newContent = document.createTextNode("Hello World!"); 
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Burada parametre olarak bir String alan createTextNode() yöntemini kullanarak içerik oluşturuyoruz ve ardından yeni div öğemizi belgemizde zaten var olan bir div’den önce ekliyoruz.

Öğeleri silme

var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);

Burada bir eleman alıyoruz ve onu removeChild() yöntemini kullanarak siliyoruz.

Öğeleri değiştir

Şimdi elementleri nasıl değiştirebileceğimize bir göz atalım.

var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);

Burada replaceChild() yöntemini kullanarak bir öğeyi değiştiriyoruz . İlk argüman yeni öğedir ve ikinci argüman, değiştirmek istediğimiz öğedir.

Doğrudan HTML çıktı akışına yazma

Ayrıca write() yöntemini kullanarak HTML ifadelerini ve JavaScript’i doğrudan HTML çıktı akışına yazabiliriz.

document.write("<h1>Hello World!</h1><p>This is a paragraph!</p>");

Ayrıca bir tarih nesnesi gibi JavaScript ifadelerini de iletebiliriz.

document.write(Date());

write() yöntemi, belgeye oluşum sırasına göre eklenecek olan birden çok bağımsız değişkeni de alabilir.

Event Handlers

HTML DOM, Javascript’in HTML olaylarına tepki vermesine de izin verir. Burada sadece en önemlilerinden bazılarını listeledim:

• mouse click
• page load
• mouse move
• input field change

Assign Events

Etiketlerinizdeki nitelikleri kullanarak olayları doğrudan HTML kodunuzda tanımlayabilirsiniz. İşte onclick olayına bir örnek :

<h1 onclick="this.innerHTML = 'Hello!'">Click me!</h1>

Bu örnekte, <h1/> düğmesine tıkladığınızda metni “Merhaba!” olarak değişecektir.

Bir sonraki örnekte göreceğiniz gibi bir olay tetiklendiğinde de fonksiyonları çağırabilirsiniz.

<h1 onclick="changeText(this)">Click me!</h1>

Aynı olayları Javascript kodumuzda da atayabiliriz.

document.getElementById("btn").onclick = changeText();

Assign Events Listeners

Şimdi HTML öğelerinize nasıl olay dinleyicileri atayabileceğinize bakalım.

document.getElementById("btn")addEventListener('click', runEvent);

Burada, btn öğemiz tıklandığında runEvent yöntemini çağıran bir clickevent atadık.

Ayrıca tek bir öğeye birden çok olay atayabilirsiniz:

document.getElementById("btn")addEventListener('mouseover', runEvent);

Düğüm İlişkileri

DOM Belgesindeki düğümlerin birbirleriyle hiyerarşik bir ilişkisi vardır. Bu, düğümlerin bir ağaç gibi yapılandırıldığı anlamına gelir. Düğümler arasındaki ilişkiyi tanımlamak için parent, sibling ve child terimlerini kullanırız.

En üstteki düğüme kök denir ve ebeveyni olmayan tek düğümdür. Normal bir HTML belgesindeki kök <html/> etiketidir çünkü üst etiketi yoktur ve belgenin en üst etiketidir.

Düğümler Arasında Gezinme

Bu özellikleri kullanarak düğümler arasında gezinebiliriz:

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling

İşte bir h1’in ana öğesini nasıl alabileceğinize dair bir örnek.

var parent = document.getElementById("heading").parentNode