JavaScript ile arayüz tasarımı yaparken DOM manipülasyonu oldukça önemlidir Bu makalede, DOM kullanımı ile neler yapabileceğinizi öğreneceksiniz Sayfanın içeriğini değiştirmek, öğeleri eklemek veya silmek gibi işlemler yapabilirsiniz JavaScript DOM manipülasyonu ile arayüz tasarımı yapmak isteyenler için rehber niteliğinde bir makale

JavaScript, web sayfalarının arayüz tasarımında kullanılan etkili bir programlama dilidir. Bu dil sayesinde web sayfalarının özelleştirilmesi ve dinamik hale getirilmesi mümkündür. Bu konuda kullanılan en önemli araçlardan biri de DOM manipülasyonudur. DOM, Document Object Model kelimelerinin kısaltmasıdır. Kısaca, HTML sayfasındaki her bir elemanı programlı bir şekilde değiştirme işlemidir. DOM manipülasyonu, web sayfalarının özelleştirilmesinde oldukça önemli bir role sahiptir. Bu yöntemler birçok farklı amaç için kullanılabilir.

DOM manipülasyonu, kullanım alanlarına göre farklı yöntemler barındırır. Bu yöntemler arasında element seçimi, element oluşturma, element silme, element stilini değiştirme, element oluşturma ve sayfa yenileme gibi işlemler yer alır. Element seçimi, sayfada belirlenen id'ye, etikete ya da sınıfa sahip elemanlar seçilmek için kullanılır. Element oluşturma ise yeni bir eleman oluşturulması için kullanılır. Böylece web sayfasına dinamizm kazandırılabilir. Element silme işlemi ise sayfadan belirli bir elemanın silinmesi için kullanılır. Element stilini değiştirme, sayfada belirli bir elemanın stil ve görünüm değerlerinin değiştirilmesi amacıyla yapılan işlemdir. Element oluşturma ve sayfa yenileme işlemi de sayfada dinamik değişiklikler yapmayı sağlar.

DOM Nedir?

DOM (Document Object Model) web sayfalarındaki elemanların yönetimini sağlayan bir standarttır. Bir HTML sayfası açıldığında sayfada bulunan tüm elemanlar birer obje olarak görülür. DOM manipülasyonu, bu objeler üzerinde değişiklikler yaparak web sayfasının tasarımını ve içeriğini değiştirmek anlamına gelir.

Bir örnek vermek gerekirse, bir web sayfasında bulunan başlık elemanının rengini değiştirmek istiyorsanız, JavaScript kodları ile sayfayı açarak başlık elemanına ulaşarak rengi değiştirme işlemi gerçekleştirebilirsiniz. Bu işlem, herhangi bir HTML ve CSS dosyasına ihtiyaç duymadan yapılabilmektedir.

• DOM elemanlarına JavaScript ile erişmek oldukça kolaydır.
• DOM, web sayfalarındaki etkileşimli öğelerin programlanabilir hale getirilmesinde önemli bir rol oynamaktadır.
• DOM manipülasyonu, web sayfalarının daha interaktif hale getirilmesi için kullanılan bir tekniktir.

Manipülasyon Yöntemleri

JavaScript ile arayüz tasarımında en çok kullanılan tekniklerden biri DOM manipülasyonudur. Bu yöntemler, HTML sayfasındaki her bir elemanı programlı bir şekilde değiştirme işlemi yapar. Element seçimi, element oluşturma, element silme, element stilini değiştirme ve eleman oluşturma ve sayfa yenileme gibi yöntemler bu manipülasyon tekniklerinin arasındadır.

Element seçimi için en çok kullanılan fonksiyonlar, getElementById(), getElementsByTagName() ve getElementsByClassName() gibi yöntemlerdir. getElementById() fonksiyonu, bir sayfada belirlenen id'ye sahip elemanı seçme işlemi yaparken, getElementsByTagName() fonksiyonu belirli bir etikete sahip olan tüm elemanları seçme işlemi yapar. Ayrıca, getElementsByClassName() fonksiyonu, belirli bir sınıfa sahip olan tüm elemanları seçmek için kullanılır.

Element oluşturma için createElement() ve createTextNode() fonksiyonları kullanılır. createElement() fonksiyonu, belirli bir etikete sahip yeni bir eleman oluşturma işlemi yapar. createTextNode() ise yazı içeriği oluşturma işlemidir. Bu fonksiyonlar appendChild() fonksiyonu ile birleştirilerek yeni bir eleman oluşturulur.

Element silme için removeChild() fonksiyonu kullanılır. Bu fonksiyon, belirli bir eleman silme işlemi yapar. Element stilini değiştirme işlemi için ise style özellikleri kullanılır. Bu özellikleri değiştirerek elemanın görünümünü değiştirmek mümkündür. Örnek olarak, backgroundColor, color ve fontSize gibi özellikler kullanılır.

Element oluşturma ve sayfa yenileme için ise genellikle location.reload() fonksiyonu kullanılır. Bu fonksiyon, yeni bir eleman oluşturup sayfayı yenilemek için kullanılır.

Bu yöntemlerin kullanım alanları oldukça geniştir. Özellikle web sayfalarında; verilerin ve etkileşimli öğelerin güncellenmesi, dinamik içerikler oluşturma, animasyon ve geçiş efektleri ekleme gibi birçok farklı alanlarda kullanılır.

Element Seçimi

Arayüz tasarımında en sık kullanılan yöntemlerden birisi de eleman seçimi işlemidir. Bu işlemi gerçekleştirmek için JavaScript'te kullanılan bazı fonksiyonlar bulunmaktadır. Bu fonksiyonlar sayesinde bir sayfadaki belirli bir eleman ya da elemanları seçebilir ve bu elemanlara istediğimiz işlemleri uygulayabiliriz.

• getElementById(): Sayfada belirlenen id'ye sahip elemanı seçmek için kullanılan fonksiyondur. Bu yöntem, sayfadaki sadece bir elemanı seçmek için kullanılır ve seçilen elemanın bir özelliği veya içeriği değiştirilebilir.
• getElementsByTagName(): Belirli bir etikete sahip olan tüm elemanları seçmek için kullanılan fonksiyondur. Örneğin, sayfadaki tüm "p" etiketine sahip paragrafları seçmek istediğimizde bu yöntemi kullanabiliriz.
• getElementsByClassName(): Belirli bir sınıfa sahip olan tüm elemanları seçmek için kullanılan fonksiyondur. Örneğin, sayfadaki tüm "btn" sınıfına sahip düğmeleri seçmek istediğimizde bu yöntemi kullanabiliriz.

Yukarıdaki yöntemler sayesinde seçilen elemanların özelliklerine ve içeriğine erişebilir, bunları değiştirebilir veya belirli bir işlemin yapılmasını sağlayabiliriz. Bu yöntemlerin kullanımı, arayüz tasarımındaki işlemlerin hızlı bir şekilde gerçekleştirilmesini sağlayarak daha profesyonel bir görünüm elde etmeyi mümkün kılar.

getElementById()

adı verilen yöntem, belirli bir sayfada yer alan id değerine sahip elemanı seçmeye yarayan bir DOM manipülasyonu yöntemidir. Bu yöntem sayesinde, sayfadaki bir veya birden fazla elemente verilen benzersiz id'leri kullanarak seçim işlemi gerçekleştirilebilir.

Bu seçim işlemi, sayfanın içerik yapısında yer alan belirli bir elemanın stil özelliklerinin veya içeriklerinin çeşitli değişiklikler yapılması için kullanılabilir. Örneğin, bir düğme tıklanıldığında belirli bir metin alanının içeriğinin değiştirilmesi veya bir görselin boyutunun ayarlanması gibi işlemler bu yöntemle yapılabilir.

Bunun için getElementById() fonksiyonu kullanılır ve içine seçilecek elemanın id değeri verilir. Örneğin:

Bu işlem, yalnızca belirtilen id değerine sahip olan elemanın etkilenmesini sağlar ve sayfadaki diğer elementler bu değişiklikten etkilenmez.

getElementsByTagName()

belirli bir etikete sahip olan tüm elemanları seçmek için kullanılan bir DOM manipülasyon yöntemidir. Bu yöntem, belirli bir etikete sahip tüm elemanlar için bir NodeList nesnesi oluşturur. Daha sonra bu NodeList nesnesi üzerinde işlem yaparak ilgili elemanlara erişebiliriz.

Bu yöntem sayesinde sayfada bulunan tüm aynı etikete sahip elemanları seçebiliriz. Örneğin, sayfada birden fazla "h2" başlığı varsa, getElementsByTagName("h2") kodu ile tüm "h2" başlıklarını seçebilir ve üzerinde işlem yapabilirsiniz.

Bunun yanı sıra, bu yöntem NodeList nesnesi döndürdüğü için, bir for döngüsü ile elemanların hepsine tek tek erişebilir ve işlem yapabiliriz. Bu şekilde, sayfadaki tüm benzer elemanlar üzerinde aynı işlemleri tekrarlamaktan kurtulabiliriz.

Aşağıdaki örnek kodda, getElementsByTagName("p") kullanarak sayfa içerisindeki tüm "p" etiketli elemanlar seçilip, arka plan rengi değiştirilmektedir:

<p>Bu bir paragraf.</p><p>Bu da bir paragraf.</p><p>Ve burada da bir paragraf var.</p>

var paragraflar = document.getElementsByTagName("p");for (var i = 0; i < paragraflar.length; i++) {  paragraflar[i].style.backgroundColor = "yellow";}

Yukarıdaki kodda, tüm "p" etiketli elemanlar seçilip paragraflar değişkenine atanıyor. Daha sonra, for döngüsü ile tüm elemanlara tek tek erişilerek arka plan rengi değiştiriliyor.

Element Oluşturma

JavaScript ile oluşturulacak arayüzlerde, bazen sayfa üzerinde belirli bir etikete sahip yeni elemanlar oluşturmak gerekir. Bunun için kullanılan DOM manipülasyon yöntemlerinden biri de createElement() fonksiyonudur. Bu fonksiyon, belirli bir etikete sahip yeni bir elemanın oluşturulmasını sağlar. Örneğin, createElement('div') fonksiyonu, yeni bir <div> elemanı oluşturur.

Elemanlar oluşturulduktan sonra, eleman içeriği de yazılabilir. Bunun için kullanılan fonksiyonlardan biri de createTextNode()'dır. Bu fonksiyon, yeni bir yazı içeriği oluşturmak için kullanılır. Örneğin, createTextNode('Merhaba Dünya') fonksiyonu, sayfada "Merhaba Dünya" yazısı oluşturur.

Oluşturulan elemanlar ve içerikleri, sayfada görünür hale getirilmesi için appendChild() fonksiyonu ile sayfaya eklenir. Bu fonksiyon, belirli bir elemanın sonuna yeni bir eleman ekleme işlemi yapar. Örneğin, appendChild(oluşturulanEleman) fonksiyonu, belirli bir elemanın sonuna oluşturulmuş elemanı ekler.

createElement()

createElement() fonksiyonu, web sayfasında belirli bir etikete sahip yeni bir eleman oluşturmak için kullanılır. Bu fonksiyon, sayfanın HTML kod yapısında belirlenen etiketle eşleşen bir elementi oluşturur.

Bu fonksiyon kullanılarak HTML sayfasındaki bir <div> etiketi içerisine birden fazla <p> etiketi oluşturulabilir. Örneğin;

let divElementi = document.createElement("div");for(let i = 0; i < 3; i++){    let pElementi = document.createElement("p");    divElementi.appendChild(pElementi);}

Yukarıdaki örnekte, ilk olarak <div> etiketine sahip yeni bir element oluşturuluyor. Daha sonra <p> etiketi içerisindeki yazı içeriği oluşturulmadan, for döngüsü içerisinde birden fazla <p> etiketi oluşturuluyor ve her biri <div> etiketine ekleniyor.

Bu sayede, DOM kullanarak yeni elementler oluşturulabilir ve web sayfasının dinamikleştirilmesi sağlanabilir. JavaScript dilinin web programlamasındaki önemli araçlarından olan DOM manipülasyonu yöntemleri, web sayfalarının interaktif hale getirilmesinde büyük bir rol oynamaktadır.

createTextNode()

Element oluşturmaya yardımcı olan createTextNode() fonksiyonu, belirlenen bir elemanın yazı içeriğini oluşturmak için kullanılır. Bu fonksiyonun kullanımı oldukça basittir. Sadece belirtilen bir yazı içeriğini içeren bir TextNode oluşturur ve bu TextNode, hedeflenen elemanın altındaki son çocuk eleman olarak eklenir.

Örneğin, bir HTML sayfasında bir başlık etiketi içeren bir eleman oluşturmak istediğinizi düşünelim. createTextNode() fonksiyonunu kullanarak bu yazı etiketini içeren bir TextNode oluşturulabilir:

var baslik = document.createElement("h1");var baslikYazi = document.createTextNode("JavaScript ile DOM Manipülasyonu");baslik.appendChild(baslikYazi);

Bu örnek, bir h1 etiketi oluşturur ve içeriğine "JavaScript ile DOM Manipülasyonu" yazısını ekler.

Bu fonksiyon aynı zamanda birden çok TextNode'ların birleştirilmesi için de kullanılabilir. Örneğin:

var paragraf = document.createElement("p");var ilkCumle = document.createTextNode("DOM manipülasyonunun kullanımı oldukça yaygındır. ");var ikinciCumle = document.createTextNode("Çünkü sayfayı dinamik hale getirir.");paragraf.appendChild(ilkCumle);paragraf.appendChild(ikinciCumle);

Bu örnek, iki farklı yazı içeriğini oluşturur ve daha sonra bu yazıları birleştirerek bir paragraf oluşturur.

createTextNode() fonksiyonu, daha karmaşık elementlerin oluşturulması için vazgeçilmez bir araçtır. Yazı içeriği oluşturmak üzerine yoğunlaşarak, sayfadaki içeriğin daha okunaklı ve anlaşılır hale gelmesine yardımcı olur.

Element Silme

Element Silme

DOM manipülasyonu ile eleman silme işlemi removeChild() fonksiyonu ile gerçekleştirilir. Bu yöntem ile sayfada belirli bir elemanın silinmesi mümkündür. removeChild() fonksiyonu, silinmek istenen elemanın üst elemanı tarafından çağrılmalıdır.

Örnek olarak, belirli bir