JavaScript DOM kullanımı ile ilgili en temel örnekleri öğrenmek isteyenler için ideal bir kaynak DOM, HTML sayfalarında oluşturulmuş nesnelere erişmek için kullanılan bir arayüzdür Bu yazıda, DOM'un en temel kullanım örnekleri anlatılmaktadır Başlangıç seviyesinde olanlar için oldukça yararlı ve pratik bilgiler içermektedir

JavaScript, web sayfalarında etkileşimli ve dinamik özellikler oluşturmak için oldukça önemlidir. Bu amaçla kullanılan en önemli araçlardan biri de Document Object Model (DOM) kullanımıdır. DOM, HTML sayfalarındaki elementlerin birer obje olarak ele alınabilmesini ve bu objeler üzerinde işlemler yapılabilmesini sağlar.

Bu makale, JavaScript DOM kullanımı hakkında en temel bilgi ve örnekleri içermektedir. DOM elementlerine erişmek, özelliklerini değiştirmek ve olaylarını yönetmek için kullanılabilecek yöntemler konusunda bilgi edinmek isteyenler için kapsamlı bir kaynak olacaktır.

• DOM Nedir?: DOM, bir HTML sayfasını oluşturan elementlerin hiyerarşik bir yapıda birbirine bağlı olmasından yararlanarak, JavaScript ile etkileşimli bir şekilde kullanılabilen bir API'dir.
• DOM Elementleri: DOM'da sıklıkla kullanılan elementler hakkında bilgi edinmek ve bu elementleri seçmek için kullanılabilecek yöntemler konusunda örnekler sunulacaktır.
• DOM Özellikleri: DOM elementlerinin özelliklerine erişmek ve bu özellikleri değiştirmek için kullanılabilecek yöntemler hakkında bilgi edinmek isteyenler için örnekler sunulacaktır.
• DOM Olayları: Kullanıcıların uygulamanızla etkileşimde bulunmalarını sağlamak için kullanılabilecek DOM olayları hakkında örnekler sunulacaktır.

Javascript DOM kullanımı oldukça önemli bir konudur. Bu nedenle, örneklerle açıklanan bu makale, DOM kullanımı konusunda anlamaya yardımcı olacak bütünlüklü bir kaynak niteliği taşımaktadır.

DOM Nedir?

JavaScript, HTML sayfalarıyla etkileşime geçmek için kullanılan bir programlama dilidir. Bu etkileşimi sağlamak için JavaScript, Document Object Model (DOM) olarak bilinen bir API siyasetini kullanır. DOM, bir HTML sayfasını bir ağaç yapısı olarak düzenler ve bu sayfaya erişmek için JavaScript kullanılmasına olanak tanır.

DOM, HTML sayfasındaki her öğeyi bir nesne olarak temsil eder. Bu öğeler, HTML etiketleri arasındaki metin, resimler, formlar ve daha fazlasını içerebilir. DOM, bu elemanlara erişmek ve etkileşim kurmak için birçok yöntem sağlar. Bu, web sayfalarının dinamik ve etkileşimli hale getirilmesine olanak tanır.

DOM Elementleri

JavaScript'in Document Object Model'i (DOM), HTML sayfalarıyla etkileşim kurmak için kullanılan en temel API'lerden biridir. DOM, HTML sayfalarındaki metinlerden, görsellere kadar hemen hemen her şey için bir eleman sunar.

DOM'daki en yaygın kullanılan elementler arasında HTML elementleri (div, span, p, h1, h2, input, button vb.), form elementleri (input type="text", input type="checkbox", select, radio vb.) ve img elementleri yer alır. Bu elementleri seçmek için kullanılan yöntemler arasında getElementById, getElementsByTagName, getElementsByClassName ve querySelectorAll gibi fonksiyonlar yer alır.

Bununla birlikte, DOM'da elementleri seçmek için sadece bu fonksiyonları kullanmak yeterli değildir. CSS seçicileri de kullanarak elementleri seçmek mümkündür. Örneğin, querySelectorAll fonksiyonuyla birlikte "input[type='text']" seçici kullanarak sadece input type="text" elementlerini seçebilirsiniz.

Yukarıdaki tabloda, DOM'da elementleri seçmek için kullanılan en yaygın metodlar ve kısa açıklamaları yer almaktadır.

Bunların yanı sıra, elementlerin özelliklerini değiştirmek için kullanabileceğimiz yöntemler de vardır. getElementById fonksiyonu gibi elementi seçtikten sonra, elementin özelliklerine erişmek için . (nokta) operatörünü kullanabilirsiniz. Örneğin, "document.getElementById('myDiv').innerHTML = 'Merhaba Dünya';" kodu, myDiv id'li div'in içeriğini "Merhaba Dünya" olarak değiştirir.

• getElementById fonksiyonu: Bir HTML elemanının ID özniteliğine göre öğeyi döndürür.
• getElementsByClassName fonksiyonu: Bir HTML elemanının class özniteliğine göre öğeyi döndürür.
• innerHTML özelliği: HTML öğesinin içerik kısmını belirtir.
• setAttribute yöntemi: Belirtilen özniteliği ve değerini bir HTML öğesine ekler veya belirtilen özniteliğin değerini değiştirir.
• removeChild yöntemi: Bir HTML öğesini kaldırır.

Yukarıda derlenen bilgiler doğrultusunda, DOM kullanarak HTML sayfalardaki elementleri bulmak ve özelliklerini değiştirmek oldukça kolaydır. Bu yöntemler sayesinde, web sayfalarının tasarımında daha etkili ve dinamik öğeler oluşturabilirsiniz.

HTML Elementleri

HTML elementleri, web sayfalarındaki metin, resim ve diğer öğeleri temsil eden DOM'un en temel yapı taşlarından biridir. DOM hiyerarşisinde en üstte yer alan document objesi, HTML sayfasını temsil eder ve altındaki tüm elementleri içerir. HTML elementlerini seçmek için kullanılan en yaygın yöntemler arasında getElementById(), getElementsByTagName() ve getElementsByClassName() yer alır.

Örneğin, bir HTML form elementi üzerinde çalışırken, form alanlarının değerlerini almak veya değiştirmek için getElementById() veya getElementsByTagName() metodunu kullanabilirsiniz. Benzer şekilde, belirli bir class'a sahip elementleri seçmek veya bunlar üzerinde değişiklik yapmak için getElementsByClassName() metodunu kullanabilirsiniz.

Form Elementleri

Kullanıcıların girdiği bilgileri almak için HTML sayfalarda sıkça kullanılan form elementleri, Document Object Model'in (DOM) bir parçası olarak JavaScript ile etkileşim kurmamıza olanak tanır. Bu elementleri seçmek için kullanabileceğimiz bazı yöntemler şunlardır:

• getElementById(id): Bir id değeri kullanarak elementi seçer
• getElementsByTagName(name): Bir etiket adı kullanarak elementlerin bir koleksiyonunu seçer
• getElementsByClassName(name): Bir class adı kullanarak elementlerin bir koleksiyonunu seçer

Örneğin, bir form elementine bir id verdiyseniz aşağıdaki örnek kodu kullanarak seçebilirsiniz:

var formElement = document.getElementById("my-form");

Form elementleri arasında en sık kullanılanlar arasında input elemanları yer alır. Bu elemanların type özelliği tarafından belirlenen farklı formları vardır. Örneğin, type="text" olan bir input elemanı, kullanıcıdan metin almak için kullanılabilir.

Aşağıdaki örnek kod, type="text" olan input elemanlarının bir koleksiyonunu seçer:

var textInputs = document.getElementsByTagName("input");for (var i = 0; i < textInputs.length; i++) {  if (textInputs[i].type === "text") {    console.log(textInputs[i].value);  }}

Bu örnek kodundaki döngü, belgedeki tüm input elemanlarını dolaşır ve type="text" olan her elemanın değerini konsoluna yazdırır.

İmaj Elementleri

İmaj Elementleri

HTML sayfalarında resim göstermek için sıkça kullanılan img elementleri de DOM elementlerinden biridir. Bir resimi sayfaya eklemek için HTML kodunun içine bir img etiketi eklemek yeterlidir:

Bu kodda, src özelliği resmin URL'sini belirtirken, alt özelliği resmin açıklamasını içerir. Bu özellikler, JavaScript tarafından değiştirilebilir.

Resim elementlerini DOM'da seçmek için değişik yöntemler kullanılabilir. Örneğin, id değerine sahip bir resim elementini şu şekilde seçebiliriz:

let resim = document.getElementById("resim-id");

Bunun yerine, img elementinin src değerine göre de bir seçim yapabiliriz:

let resim = document.querySelector("img[src='resim.jpg']");

img elementleri, HTML sayfalarında çeşitli boyutlarda gösterilebilir. Bu boyutlandırma özellikleri de yine DOM tarafından (ya da CSS tarafından) değiştirilebilir:

• width: Resmin genişliğini piksel cinsinden belirtir
• height: Resmin yüksekliğini piksel cinsinden belirtir

Örneğin, bir resmin genişliğini 400 piksele ayarlamak için şu kod kullanılabilir:

resim.width = 400;

Yine resmi şekillendirmek için kullanılan bir diğer özellik de, className özelliğidir. Bu özellik, resim elementine atanmış CSS sınıflarını gösterir. Bu sayede, JavaScript ile CSS sınıfları eklenebilir ya da kaldırılabilir:

resim.className += " buyuk-resim";

Bu kod, resim elementine "buyuk-resim" sınıfını ekler. Sınıfın CSS stil dosyasında tanımlanmış olması halinde, resim elementinin boyutları da değiştirilebilir.

CSS Seçicileri Kullanarak Elementleri Seçmek

JavaScript, CSS seçicilerini kullanarak DOM'da belirli elementleri seçmek için kullanılabilir. Aşağıda en yaygın kullanılan CSS seçicilerinden bazıları verilmiştir.

• document.getElementById(id): Belirtilen id ile eşleşen bir elementi seçmek için kullanılır.
• document.getElementsByClassName(className): Belirtilen class adı ile eşleşen tüm elementleri seçmek için kullanılabilir.
• document.getElementsByTagName(tagName): Belirtilen etiket adı ile eşleşen tüm elementleri seçmek için kullanılabilir.
• document.querySelector(cssSelector): Belirtilen CSS seçicisine göre eşleşen ilk elementi seçmek için kullanılır.
• document.querySelectorAll(cssSelector): Belirtilen CSS seçicisine uygun tüm elementleri seçmek için kullanılır.

Örneğin, aşağıdaki örneklerde bir HTML sayfasındaki belirli elementleri seçmek için bu yöntemler kullanılmıştır.

```javascript// ID ile element seçmevar header = document.getElementById("header");

// Class adıyla element seçmevar buttons = document.getElementsByClassName("btn");

// Etiket adıyla element seçmevar paragraphs = document.getElementsByTagName("p");

// CSS seçicisi ile element seçmevar firstParagraph = document.querySelector("p:first-of-type");

// CSS seçicisi ile birden fazla element seçmevar selectedElements = document.querySelectorAll(".selected");```

Yukarıdaki örnekler, CSS seçicilerini kullanarak belirli elementleri seçmek için kullanılacak yöntemleri göstermektedir. Bu yöntemleri kullanarak, seçilen elementlerin özelliklerine erişebilir ve değiştirebilirsiniz.

DOM Özellikleri

JavaScript ile DOM'daki elementleri seçmek ve onlara erişmek yeterli değildir; bir elementin özelliklerine erişmek ve bunları değiştirmek de gerekli olabilir. DOM özellikleri, bir elementin değerleri, metin içeriği, sınıfları, boyutu, vb. ile ilgili bilgilerdir. DOM özelliklerini kullanarak, bir elementin özelliklerini okuyabilir ve değiştirebilirsiniz.

Elementlerin özelliklerini değiştirmek için kullanılan basit yöntemlerden biri, innerHTML özelliğidir. innerHTML özelliği, bir elementin içindeki HTML kodunu okur veya değiştirir. Aşağıdaki örnekte, bir div elementinin içindeki metin içeriği değiştiriliyor:

Özelliklerin değiştirilmesi sadece mevcut etkileşimi değil, aynı zamanda diğer özellikleri ve hatta stil özelliklerini değiştirmenizi sağlar. Örneğin, sınıf ekleme veya kaldırma işlemleri yapmak için "className" özelliği kullanılabilir. Aşağıdaki örnekte, elemente yeni bir sınıf ekleniyor ve ardından sınıf kaldırılıyor:

• Bir elementin sınıfı className özelliği kullanılarak değiştirilebilir:

var element = document.getElementById("myDiv");element.className = "yeniSınıf";element.className = element.className.replace("eskiSınıf", "");

Bu örnekler, DOM özellikleri ile bir elementin özelliklerini nasıl değiştireceğinizi gösterir. JavaScript kullanarak, DOM'daki elementlerin renkleri, font boyutları, formulardaki metin değerleri, vb. de dahil olmak üzere birçok özelliği değiştirilebilir.

Attribute Değiştirmek

DOM üzerindeki elementlerdeki attribute değerleri genellikle JavaScript kullanılarak değiştirilebilir. Bu yöntem sayesinde, HTML sayfalarında yer alan elementlerin özellikleri kolayca değiştirilebilir.

Örneğin, bir butonun rengini değiştirmek istediğinizde, butonun style.backgroundColor özelliğini kullanarak rengini değiştirebilirsiniz. Aşağıdaki örnek kod, bir butonun rengini kırmızıya değiştirecektir:

const button = document.querySelector('#myButton');button.style.backgroundColor = 'red';

Aynı şekilde, bir resmin kaynak URL'si (src attribute) değiştirmek için setAttribute yöntemi kullanılabilir. Aşağıdaki örnek kod, bir resmin kaynak URL'sini değiştirecektir:

const img = document.querySelector('#myImage');img.setAttribute('src', '/yeni-resim.jpg');

Bir başka örnek ise, bir linkin hedef URL'sini (href attribute) değiştirmektir. Bu da aynı şekilde setAttribute yöntemi kullanılarak yapılabilir:

const link = document.querySelector('#myLink');link.setAttribute('href', 'https://www.yenilink.com');

Bu örnekler sayesinde, HTML sayfalarındaki elementlerin özelliklerini kolayca değiştirebileceğiniz gibi, DOM üzerindeki diğer özelliklere de aynı yöntemlerle erişmek ve onları değiştirmek mümkündür.

Class Ekleme ve Kaldırma

DOM elementlerinin görsel stilini değiştirmek için genellikle class ekleme ve kaldırma işlemleri yapılır. Bu işlemler, JavaScript'te oldukça kolaydır ve şu yöntemler ile yapılabilir:

• classList.add(): Bir elemente belirtilen sınıfı ekler
• classList.remove(): Bir elementten belirtilen sınıfı kaldırır
• classList.toggle(): Bir elementte belirtilen sınıf varsa kaldırır, yoksa ekler

Bu yöntemler, bir HTML sayfasında belirli bir elemente sınıf eklemek veya kaldırmak için kullanılabilir. Örneğin, bir web sitesinde butona tıklanınca bir menü açmak istiyorsanız, açma/kapama işlemleri için bir CSS sınıfı ekleyip kaldırabilirsiniz.

Ayrıca, bu yöntemler ile bir elementin birden fazla sınıfını da yönetebilirsiniz. Örneğin, bir div elementinin hem "container" hem de "inner" sınıflarını kontrol edebilirsiniz:

var element = document.querySelector('div');element.classList.add('container', 'inner');element.classList.remove('container');

Bu örnekte, "container" ve "inner" sınıfları eklenirken, daha sonra sadece "container" sınıfı kaldırılıyor.

Class ekleme ve kaldırma işlemleri, web sayfaları için oldukça önemlidir. Bu işlemler sayesinde, farklı durumlarda farklı görsel stiller uygulanabilmekte ve kullanıcıya daha iyi bir deneyim sunulabilmektedir.

DOM Olayları

DOM olayları, kullanıcının uygulamanızla etkileşimde bulunmasını sağlamak için kullanılabilecek yöntemlerdir. Bunlar, web siteleri ve uygulamalarında interaktif ve dinamik özellikler oluşturmak için kullanışlı araçlardır. DOM olayları, çeşitli event listener'lar kullanılarak uygulanır. 

Bu olaylar, kullanıcının sayfadaki bir öğeyle etkileşimde bulunduğunda tetiklenirler. Örneğin, bir butona tıkladığınızda, olay işleyicisi buton tıklanma olayını belirleyen kodu çalıştırır ve bu şekilde uygulamanızı dinamik bir hale getirir. DOM olayları kullanarak, kullanıcının çeşitli eylemlere yanıt olarak farklı işlemler gerçekleştirebileceği bir web uygulaması oluşturabilirsiniz.

Örneğin, bir dizi DOM olayı kullanarak kullanıcının web sayfanızda şunları yapmasını sağlayabilirsiniz:

• Bir butona tıklama ile bir formu gösterir veya gizler.
• Bir hover olayı ile bir öğenin arka plan rengini değiştirir.
• Formu gönderme olayını yakalar ve bir sunucu isteği oluşturur.

DOM olayları sıklıkla kullanılmaktadır ve HTML sayfanıza eklediğiniz birçok elementin farklı olayları bulunmaktadır. Bazı yaygın DOM olayları şunlardır:

• Click: Bir elemente tıklanıldığında tetiklenir.
• Submit: Bir form gönderimi ile tetiklenir.
• Mouseenter: Bir elemente fareyle girildiğinde tetiklenir.
• Mouseleave: Bir elementten fareyle ayrıldığınızda tetiklenir.
• Change: Bir form öğesi değiştirildiğinde tetiklenir.

Yukarıdaki örneklerin yanı sıra, daha birçok DOM olayı bulunmaktadır. DOM olayları, kullanıcınızın uygulamanızla etkileşimde bulunmasını kolaylaştıran araçlardır. Birçok web uygulaması dinamik özelliklerle oluşturulduğundan, DOM olayları bu sitelerde sıklıkla kullanılır. Yapmanız gereken tek şey, kullanıcı tepkilerine uygun şekilde farklı olaylar oluşturmaktır.

Butona Tıklama

Butona tıklama olayları, HTML sayfalarda yer alan buton elementlerine etkileşimli bir şekilde işlevsellik kazandırmak için kullanılan bir yöntemdir. Bu yöntem, genellikle kullanıcının bir eyleme geçmesini sağlamak için kullanılır. Örneğin, bir butona tıklama olayıyla kullanıcının bir formu göndermesi sağlanabilir.

Bu yöntemi kullanmak için öncelikle seçilen buton elementine bir tıklama dinleyicisi eklememiz gerekiyor. Bu işlem, JavaScript kullanılarak kolayca yapılabilir. İşlemin örneği aşağıdaki gibidir:

```javascriptconst button = document.querySelector('#myButton');button.addEventListener('click', function(){ // Butona tıklandığında yapılacak işlemler buraya yazılır});```

Yukarıdaki örnekte, seçilen buton elementi, querySelector yöntemi kullanılarak seçiliyor ve click olayı dinleyicisi ekleniyor. Daha sonra, butona tıklandığında yapılacak işlemler bu fonksiyon içinde tanımlanıyor. Bu örnek, butona tıklama olaylarını basit bir şekilde kullanımını göstermektedir.

Butona tıklama olayları aynı zamanda kullanıcılara sayfa gezinme işlemlerini de basitleştirebilir. Örneğin, bir butona tıklama olayı ekleyerek, kullanıcının sayfanın en üstüne gitmesini sağlayabiliriz.

Bu yöntemler sayesinde kullanıcılara daha iyi bir deneyim sunabilir ve web sayfalarının daha etkileşimli hale gelmesini sağlayabiliriz.

Form Gönderme

HTML form elementleri, kullanıcı girişi almak için sıklıkla kullanılır. Bu form elemanlarına veriler girildikten sonra, form gönderme işlemi gerçekleştirilerek sunucuya gönderilir. Form submit olaylarını ele alarak kullanıcının form gönderme olayına karşılık vermek mümkündür.

DOM'da form gönderme işlemleri için addEventListener() yöntemi kullanılır. Bu yöntemi kullanarak, kullanıcının formu gönderme işlemine bağlı olarak ne yapılacağını belirleyebilirsiniz. Örneğin, form gönderme işleminden önce kullanıcının girdiği bilgileri doğrulamak veya form gönderildikten sonra kullanıcının yönlendirileceği sayfayı belirlemek için bu yöntemi kullanabilirsiniz.

Aşağıdaki örnek, "submit" olaylarını kullanarak bir form gönderme işlemi gerçekleştirdikten sonra kullanıcının karşılaşacağı bir mesaj göstermektedir:

        <form id="demo-form">          <label for="name">İsim:</label>          <input type="text" id="name" name="name"><br>          <label for="email">E-posta:</label>          <input type="email" id="email" name="email"><br>          <input type="submit" value="Gönder">        </form>      

        var form = document.getElementById("demo-form");        form.addEventListener("submit", function(event) {          event.preventDefault();          alert("Form gönderildi.");        });      

Yukarıdaki örnekte, "submit" olayını ele alarak, form gönderme işleminden önce kullanıcının girdiği bilgileri doğrulama veya form gönderildikten sonra yönlendirme işlemi gerçekleştirme gibi birçok farklı işlem yapabilirsiniz. Bu örnek, basit ama işlevsel bir örnek sunmaktadır.