Örnek Uygulama ile JavaScript DOM Manipülasyonu İşlemleri

Örnek Uygulama ile JavaScript DOM Manipülasyonu İşlemleri yazımızda, JavaScript DOM manipulation işlemlerinin örneklerini ele alıyoruz Sayfalarınız için en yararlı ipuçları burada! Detaylı bilgi için hemen sitemizi ziyaret edin

JavaScript DOM manipülasyonunu anlamak için örnek bir uygulama yapmak oldukça faydalı olacaktır. Bu örnek uygulama, DOM'un farklı işlemleri üzerinde uygulanarak nasıl bir dinamik web sayfası oluşturulacağını gösterir. Öncelikle, bir HTML belgesi oluşturarak DOM üzerinde işlem yapacağız. Sayfamıza bir başlık, bir metin kutusu ve bir buton ekleyeceğiz. Butona tıklandığında, metin kutusuna girilen değeri başlık olarak ekleyeceğiz. İşlemleri yapabilmek için getElementById() ve createElement() metodlarını kullanacağız.

Fonksiyon	Açıklama
getElementById()	Belirli bir ID'ye sahip bir elementi seçmek için kullanılır.
createElement()	Belirli bir HTML elementi oluşturmak için kullanılır.

İlk olarak, HTML kodumuzu yazalım:

<!DOCTYPE html><html><head>  <title>Örnek Uygulama</title></head><body>  <h1 id="baslik">Başlık</h1>  <label for="metinKutusu">Başlık Girin:</label>  <input type="text" id="metinKutusu"></input>  <button onclick="baslikGuncelle()">Güncelle</button>  <script src="uygulama.js"></script></body></html>

Sonra, JavaScript kodumuzu oluşturalım:

function baslikGuncelle() {  var metinKutusu = document.getElementById("metinKutusu");  var baslik = document.getElementById("baslik");  baslik.innerHTML = metinKutusu.value;}

Bu kod, butona tıklandığında metin kutusundaki değeri alır ve başlık elementinde gösterir. Kodu bir dosyaya kaydedin ve HTML belgenize ekleyin. Sonuçta göreceksiniz ki, metin kutusuna girdiğiniz değer başlık olarak eklenecektir. Bu, DOM üzerinde işlem yaparak dinamik bir web sayfası oluşturmanın basit bir örneğidir.

DOM nedir?

DOM (Document Object Model), tarayıcının bir web sayfasını yüklediğinde sayfanın yapısını anlaması için kullanılan bir yapıdır. Bu yapı, bir HTML sayfasının içindeki tüm öğeleri, özellikleri ve etkinlikleri birer nesne olarak temsil eder. Bu nesnelerin birleştirilmesiyle web sayfasındaki her şey programlanabilir hale gelir.

İşte tam da bu nedenle DOM, web sayfalarının yapı taşlarıdır. DOM yapısı, aynı zamanda bir programlama arabirimi olarak da kullanılabilir. Bu sayede, web sayfaları JavaScript aracılığıyla dinamik olarak değiştirilebilir. DOM, web sayfalarının etkileşimli hale gelmesini sağlar ve bu sayede kullanıcıların daha iyi bir deneyim yaşamasına yardımcı olur.

DOM yapısının en üst seviyesinde ise ‘document’ isimli bir nesne bulunur. Bu nesne, web sayfasındaki tüm öğelerin ve özelliklerin üzerinde kullanılabilir. ‘document’ nesnesi üzerindeki değişiklikler, web sayfasının hemen görüntülenmesini sağlar.

Sonuç olarak, DOM, web sayfalarının yapılarının anlaşılmasını ve değiştirilmesini sağlayan temel bir yapıdır. Bu nedenle, her JavaScript geliştiricisi DOM hakkında temel bir bilgi sahibi olmalıdır.

DOM Manipülasyonu

DOM Manipülasyonu, web sayfalarında değişiklik yaparak sayfaları dinamik hale getirme işlemidir. DOM (Document Object Model), HTML, XHTML veya XML belgelerinin program tarafından işlenebilir bir yapıda saklanmasını sağlar ve web sayfalarının yapısını oluşturur. Manipülasyon yaparken öncelikle belirli bir DOM elementini seçmemiz gerekir. Seçim işlemi için elementin adı, açıklaması veya özellikleri kullanılabilir.

Bir örnekle açıklayacak olursak, sayfadaki metin kutusunda yer alan yazıları değiştirme işlemi gerçekleştirmek için öncelikle metin kutusuna ulaşmamız gerekir. Bu işlem için öncelikle o metin kutusunun DOM yapısında yerini tespit etmemiz gereklidir. Daha sonra tespit ettiğimiz bu DOM elementine müdahale ederek kullanıcının yapmayı istediği işlemleri gerçekleştirebiliriz.

Manipülasyon işlemleri sırasında belirli bir DOM elementini seçtikten sonra, birçok işlem yapılabilir. Bu işlemler arasında element ekleme, silme, güncelleme, değiştirme, gizleme, gösterme gibi işlemler yer alır. Her işlem için farklı yöntemler kullanılabilmektedir. Örneğin, belirli bir DOM elementine yeni bir element ekleme işlemi için createElement() metodu kullanılabilir. Bu metod sayesinde yeni bir element oluşturarak, sayfanın yapısını dinamik hale getirebiliriz.

Element Seçimi

JavaScript DOM manipülasyonunun temelinde belirli bir DOM elementini seçmek ve üzerinde değişiklik yapmak yatar. Element seçimi için kullanılan en temel yöntemler, ID ve class kullanarak seçim yapmaktır.

ID seçimi örneği için, document.getElementById() fonksiyonu kullanılır ve belirli bir ID'ye sahip element seçilir. Örneğin,

elementinin ID'si "table1" olarak belirlenmişse, document.getElementById("table1") kodu ile bu element seçilebilir.

Class seçimi örneği için, document.getElementsByClassName() fonksiyonu kullanılır ve belirli bir class'a sahip tüm elementler seçilebilir. Örneğin,

elementleri için belirlenmiş olan "example" class'ı ile belirli

elementleri seçilebilir. Kod örneği:

var elements = document.getElementsByClassName("example");for (var i = 0; i < elements.length; i++) {  elements[i].style.color = "red";}

Bu kodda, "example" class'ına sahip tüm

elementleri bulunur ve stil özelliği üzerinde değişiklik yapılır. Bu şekilde, belirli elementler seçilerek manipülasyon işlemleri yapılabilir.

ID Seçimi

DOM manipülasyonu, web sayfalarının JavaScript kullanarak dinamik hale getirilmesinde önemli bir rol oynar. Belirli bir DOM elementini seçmek ve onun üzerinde değişiklik yapmak için birçok yöntem vardır. Bunlardan biri de ID kullanarak belirli bir DOM elementini seçmek ve manipüle etmek.

Örnek olarak, sayfada bir düğme elementi varsa ve bu elementin ID'si 'btn' ise, aşağıdaki kod kullanılarak bu element seçilebilir:

let btn = document.getElementById("btn");

ID seçiminde kullanılan getElementById fonksiyonu, belirli bir ID'ye sahip elementi seçmek için kullanılır. Bu örnek uygulamada, "btn" ID'sine sahip element seçilir ve "btn" düğmesine her tıklandığında bir metin kutusu elementi eklenir.

<!DOCTYPE html><html><body> <button id="btn">Metin kutusu ekle</button> <script>let btn = document.getElementById("btn");btn.addEventListener("click", function() {  let input = document.createElement("input");  input.type = "text";  document.body.appendChild(input);});</script> </body></html>

Bu örnek uygulama, her tıklamada yeni bir metin kutusu elementi ekler. Bu, DOM manipülasyonunun özelliklerinden biridir. Belirli bir elementin özelliklerini değiştirerek, yeni elementler ekleyerek veya mevcut elementleri kaldırarak web sayfalarını dinamik hale getirebilirsiniz.

Class Seçimi

Belirli bir DOM elementinin class adını kullanarak seçmek için getElementsByClassName() yöntemi kullanılır. Bu yöntem, belirtilen class adına sahip tüm DOM elementlerini bir dizi olarak döndürür. Bu yöntem özellikle, belirli bir class adına sahip birden fazla element olduğunda kullanışlıdır.

Örnek olarak, bir sayfada birden fazla div elementi olsun ve bu elementlerin hepsi aynı class adına sahip olsun. Class adı 'example' olan tüm elementlere erişmek için aşağıdaki kod kullanılabilir:

Kod	Açıklama
`var elements = document.getElementsByClassName('example');`	Class adı 'example' olan tüm DOM elementleri seçer.

Bu kod her bir 'example' class adına sahip DOM elementini döndüren bir dizi oluşturur. Diziye erişmek için standart bir dizi erişim yöntemi kullanılabilir:

Kod	Açıklama
`var element = elements[0];`	İlk 'example' DOM elementini alır.

Bu örnek, belirli bir class adına sahip birden fazla elementin seçimi için getElementsByClassName() yöntemini gösterir. Bu yöntem sayesinde, seçilen elementleri yönetmek için kullanılabilecek diğer yöntemler de mevcuttur.

Element Ekleme

JavaScript DOM manipülasyonu, web sayfalarını daha dinamik hale getirmek için kullanılan önemli bir tekniktir. Bu teknikte, web sayfalarının yapı taşı olan DOM üzerinde değişiklik yaparak sayfaların görünümünü ve davranışını değiştirebiliriz. DOM manipülasyonu işlemlerinden biri de "Element Ekleme" işlemidir.

Belirli bir DOM elementine yeni bir element eklemek için kullanılan işlem, web sayfalarında birçok farklı amaçla kullanılır. Örneğin, bir sayfaya yeni bir paragraf veya resim eklemek isteyebiliriz. Bunun için ise DOM üzerinde değişiklik yapmamız gerekmektedir.

Bu işlemi gerçekleştirmek için öncelikle eklenecek elementin özelliklerini belirlememiz gerekmektedir. Bu özellikler, elementin türü, içeriği, ID'si ve sınıfı gibi temel özellikler olabilir. Daha sonra, bu özellikler kullanılarak DOM üzerinde değişiklik yapılır ve yeni element web sayfasına eklenir.

Örneğin, bir sayfaya yeni bir başlık eklemek istiyoruz. Bunun için, DOM manipülasyonunu kullanarak yeni bir "h2" elementi oluşturabiliriz. Bu elementin içeriğinde de yeni başlık metnini belirleyebiliriz. Daha sonra, bu yeni elementi sayfaya eklemek için var olan bir elementi seçerek, bu elementin içine yeni elementi yerleştirebiliriz.

Aşağıdaki örnek kod parçasında, bir "div" elementine yeni bir "p" elementi eklemek için kullanılan kodu görebilirsiniz:

``````

Yukarıdaki kod parçasında, "divId" ID'si olan bir element seçilerek, bu elemente yeni bir "p" elementi oluşturuluyor. Bu elementin içinde de "Yeni bir paragraf metni" yazısı yer alıyor. Daha sonra, oluşturulan yeni element "divId" elementinin içine yerleştiriliyor.

Böylece, element ekleme işlemi başarıyla gerçekleştirilmiş oluyor. DOM manipülasyonu ile birçok farklı elementi web sayfasına eklemek mümkündür. Bu işlemin yanı sıra, element silme ve element seçimi gibi diğer önemli işlemler de DOM manipülasyonu ile gerçekleştirilebilir.

Text Ekleme

Text ekleme işlemi, DOM manipülasyonunda sıkça kullanılan bir işlemdir. Belirli bir DOM elementine text eklemek için öncelikle o elementin seçilmesi gerekir. Seçilen elementin innerHTML veya innerText özelliği kullanılarak text eklenir.

Örnek uygulama için HTML'de <p id="ornek-element"></p> elementi ve JavaScript kodunda document.getElementById("ornek-element").innerText = "Merhaba Dünya!"; kod bloğu kullanılabilir. Bu kod bloğu, "ornek-element" ID'sine sahip <p> elementine "Merhaba Dünya!" textini ekler.

HTML Ekleme

DOM manipülasyonu, web sayfalarının belirli bir bölümünde değişiklik yaparak daha dinamik bir hale getirme işlemidir. Bu işlem sırasında, belirli bir DOM elementine HTML elementi eklemek gerekebilir. Bunun için öncelikle, eklemek istenilen elementin HTML kodları yazılır. Daha sonra ise JavaScript ile belirli bir DOM elementine eklenir.

Örnek olarak, bir web sayfasında bulunan bir div elementine bir h2 başlığı eklemeyi düşünelim. Öncelikle, yukarıdaki örnekteki gibi belirli bir element seçilir. Ardından, eklemek istediğimiz h2 elementinin kodları yazılır:

```html

```

Daha sonra, bu h2 elementi JavaScript'te seçilen div elementine eklenir:

```javascriptlet h2Element = document.createElement("h2");let h2Text = document.createTextNode("Bu bir örnek başlıktır");h2Element.appendChild(h2Text);

let divElement = document.getElementById("exampleDiv");divElement.appendChild(h2Element);```

Bu kod bloğunda, öncelikle h2 elementi createElement() metodu ile oluşturulur. Daha sonra, createTextNode() metodu ile h2 elementinin içerisine yazılacak olan text belirtilir. Son olarak, appendChild() metodu ile h2 elementi div elementine eklenir.

Bu işlem sayesinde, web sayfasının belirli bir bölümünde, örneğimizde h2 elementinin eklenmesi sonucu web sayfası daha dinamik bir hale getirilmiş olur.

Bu örnek uygulama ile HTML eklemenin basit bir örneğini gösterdik. Farklı HTML elementleri de eklemek mümkündür. Bunun için eklemek istenilen HTML elementleri kodlanır ve JavaScript içerisinde seçilen DOM elementine eklenir.

Element Silme

DOM manipülasyonunun bir diğer önemli işlemi de belirli bir DOM elementinin silinmesidir. Bu işlem için değiştirileceği gibi silinecek olan elementin bir üst elementini de seçerek, removeChild() fonksiyonu kullanılır. Bu fonksiyon, belirtilen elementi DOM'dan tamamen kaldırır.

Örnek olarak, belirli bir ID'e sahip olan bir elementi silmek için getElementById() fonksiyonu kullanarak elementi seçiyoruz. Daha sonra seçtiğimiz elementin parent node'una erişim sağlamak için parentNode özelliğini kullanarak, removeChild() fonksiyonunu çağırıyoruz. Aşağıdaki kod bloğunda bu işlemi gerçekleştiren örnek bir kod yazısı mevcuttur.

Kod Örneği:
var silinecekElement = document.getElementById("silinecek-element"); silinecekElement.parentNode.removeChild(silinecekElement);

Bu kod bloğunda "silinecek-element" ID'ye sahip element DOM'dan tamamen kaldırılmıştır. Bu işlem, özellikle dinamik sayfalar oluştururken kullanışlı olabilir. Örneğin, bir kullanıcının verilerini kaydederken, kaydedilen verileri gösteren bir div elementi ekleyebilirsiniz ve verileri güncellemeniz gerekirse, bu div elementini DOM'dan kaldırıp yeniden ekleyebilirsiniz.

Örnek Uygulama

Örneğimize başlamadan önce, DOM manipülasyonu ile ilgili önceki işlemlere bir göz atalım. Element seçimi yaparak DOM üzerinde çalışabileceğimizi ve element ekleme/silme işlemleri yapabileceğimizi öğrendik. Şimdi, bu işlemleri bir araya getirerek bir örnek uygulama yapalım.

İşlem Adı	İşlem Açıklaması
Element Seçimi	Belirli bir element seçilir.
Element Ekleme	Seçilen elemente yeni bir element eklenir.
Element Silme	Belirli bir element silinir.

Bir sayfada "Hello World" yazan bir h1 elementi olsun. Bu elementin yanına bir buton ekleyeceğiz ve butona tıklandığında h1 elementimizi sileceğiz. Aşağıdaki örneği inceleyelim:

      Örnek Uygulama

Bu örnekte, öncelikle h1 elementimizi seçiyoruz. Sonrasında, parent element'inden yani body'den h1 elementimizi siliyoruz. Butona click event'ı tanımlayarak tıklama olayında bu fonksiyonu çağırıyoruz.

Bu basit örnekle, DOM manipülasyonunun temellerini anladık ve birleştirerek dinamik bir web sayfası oluşturma becerisi kazandık. Artık, öğrendiklerimizi farklı işlemlerde kullanabilir ve birçok farklı örnek uygulama yapabiliriz.

Sonuç

Özetle, JavaScript DOM manipülasyonu web geliştiriciler için önemli bir beceridir. DOM işlemlerini kullanarak web sayfaları dinamik hale getirilebilir ve kullanıcı etkileşimi artırılabilir. Bu işlemler, belirli bir elementi seçerek, yeni element ekleyerek veya elementi silerek yapılabilir. Bunların yanı sıra, text veya HTML metni ekleme seçeneği de vardır.

Bununla birlikte, web sayfaları için DOM manipülasyonu yaparken bazı dikkat edilmesi gereken noktalar vardır. Performansı artırmak için doğru seçmeler yapılmalıdır. Ayrıca, sunulan içerikler için uygun yapıyı kullanmak önemlidir. Aksi takdirde, web sayfaları yavaşlayabilir ve kullanıcı deneyimi kötüleşebilir.

Sonuç olarak, JavaScript DOM manipülasyonu ile web sayfalarına özel efektler, animasyonlar ve interaktif öğeler eklenebilir. Bu nedenle, geliştiricilerin bu beceriyi öğrenmesi ve uygulama deneyimi kazanması önemlidir.